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首先 ， 笔 者 十 分 荣幸 也 十 分 高 兴 你 选择 本 书 来 学 习 React Native 的 开发 。 由 于 笔者 
的 个 人 能 力 有 限 ， 这 本 书 可 能 并 不 是 最 完美 最 优秀 的 ， 但 是 相信 无 论 你 的 基础 如 何 ， 都 
可 以 随 着 本 书 的 学 习 与 练习 ， 完 完整 整地 独立 开发 出 自己 的 React Native 应 用 ， 因 为 笔 
者 也 是 这 么 学 过 来 的 。 因 此 ， 将 本 书 定义 为 教程 ， 不 如 称 其 为 一 本 经 验 与 总 结 的 笔记 ， 
相信 你 在 学 习 的 过 程 中 会 深 有 体会 。 

说 起 来 ，JavaScript 的 语法 并 不 是 这 本 书 的 核心 ， 但 是 学 习 一 种 功夫 之 前 ， 一 定 要 
有 一 把 顺手 的 武器 ， 因 为 依然 有 很 多 初学 者 或 原生 开发 者 对 JavaScript 语言 的 了 解 并 不 
深入 ， 所 以 本 书 的 前 4 章 着 重 对 JavaScript 语法 以 及 ES6 的 新 特性 进行 介绍 ， 帮 助 你 为 
后 边 的 学 习 扫 除 基础 障碍 。 

学 习 客户 端 编程 ， 最 重要 的 莫 属 界面 、 数 据 、 逻 辑 这 3 部 分 ， 本 书 的 第 5 一 8 章 将 
向 你 介绍 React Native 中 的 基础 界面 组 件 、 数 据 与 网 络 技术 以 及 用 户 交 互 管理 技术 等 ， 
学 习 一 门 技能 就 是 在 完成 一 张大 拼图 ， 每 一 个 知识 点 都 是 这 张 拼图 中 的 一 块 ， 学 习 完 这 
4 章 内 容 ， 你 将 掌握 React Native 开发 中 所 有 的 基础 技能 ， 后 面 就 是 对 它们 的 组 合 和 应 
用 了 。 

本 书 第 9 一 11 章 提供 了 3 个 完整 的 React Native 实战 练习 ， 这 3 章 的 项 目 也 将 由 简 
到 难 ， 帮 助 你 熟练 应 用 前 面 所 学 习 的 知识 。 


本 书 第 12 章 为 扩展 章节 ,这 一 章节 将 更 偏向 介绍 React Native 的 一 些 高 级 开发 技术 ， 
比如 和 原生 交互 、 嵌 入 原生 应 用 、 开 发 React Native 组 件 等 ， 如 果 你 有 兴趣 ， 可 以 好 好 
研究 一 下 。 

IT 领域 日 新 月 异 ，React Native 是 一 种 移动 端 跨 平 台 软 件 开 发 框架 ， 可 能 并 不 是 最 
优秀 的 ， 但 是 Facebook 的 长 期 维护 和 它 优秀 的 设计 思想 无 论 如 何 都 是 值得 我 们 学 习 的 。 
有 人 说 , 每 学 习 一 门 技术 , 每 次 离开 自己 所 擅长 的 领域 走向 新 的 领域 学 习 都 是 一 种 重生 ， 
这 个 过 程 可 以 让 你 感受 到 不 同 的 思维 模式 ， 体 验 到 不 同 圈子 的 乐趣 。 和 你 一 样 ， 笔 者 也 
是 一 名 学 习 者 ， 如 果 你 愿意 ， 可 以 随时 和 笔者 交流 ，QQ: 316045346。 
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为 方便 读者 上 机 练习 ， 本 书 提供 了 全 书 实例 源 代码 ， 下 载 地 址 : 

https://pan.baidu.com/s/1msOpjsdGcoSRCN5K4qcTPQ (注意 区 分 数字 和 
英文 字母 大 小 写 ) 

如 果 你 在 下 载 过 程 中 遇 到 问题 ， 可 发 邮件 至 booksaga@126.com， 邮 件 标题 为 
“React Native 全 教程 : 移动 端 跨 平台 应 用 开发 下 载 资源 ”， 获 得 帮助 。 

最 后 ， 再 次 感谢 你 选择 了 本 书 ， 笔 者 也 真心 地 希望 它 可 以 帮助 你 到 达 自 己 的 预定 目 
标 。 这 本 书 最 终 能 呈现 在 你 的 面前 ， 除 了 笔者 的 努力 ， 还 要 感谢 支持 我 的 家 人 和 朋友 ， 
尤其 是 王 金 柱 编辑 ， 在 写作 过 程 中 他 给 了 我 巨大 的 帮助 与 鼓励 。 


琛 少 
2018 年 2 月 
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12.7 在 真 机 上 运行 React Native 


从 JavaScript 开始 


JavaScript 是 一 门 流行 的 脚本 语言 ， 同 时 ， 它 也 是 开发 React Native 跨 平台 应 用 的 基础 语言 。 
本 书 前 几 章 会 安排 了 较 多 篇 幅 来 介绍 JavaScript， 以 帮助 读者 零 门 槛 地 进行 React Native 开发 。 当 
然 ， 如 果 你 是 熟练 的 Web 开发 者 ， 相 信 JavaScript 对 你 来 说 并 不 能 成 为 障碍 ， 但 是 依然 建议 你 阅 
读 第 4 章 的 内 容 一 ES6 的 一 些 新 特性 ， 因 为 ES 在 React Native 框架 中 随处 可 见 。 

本 章 , 将 简单 地 对 JavaScript 作 全 面 的 了 解 , 同时 配置 好 开发 环境 ， 以 便于 开启 你 的 学 习 之 旅 。 





1.1 学 习 环 境 的 配置 


编程 是 一 种 手 脑 结合 的 工作 ， 我 们 在 学 习 编 程 时 ， 动 手 远 比 读书 重要 得 多 。 因 此 在 JavaScript 
语言 学 习 正 式 开始 之 前 ， 首 先 需要 搭建 完善 、 方 便 、 易 用 的 开发 环境 。 有 了 称 手 的 工具 ， 在 学 习 的 
路 上 ， 才 能 披荆斩棘 ， 一 往 无 前 。 


1.1.1 ”使 用 浏览 器 进行 JavaScript 代码 的 调试 


JavaScript 语言 最 初 设计 时 用 于 作为 浏览 器 的 脚本 语言 ， 因 此 所 有 浏览 器 都 可 以 对 JavaScript 
代码 进行 解释 与 运行 。MacOS 的 Safari 浏览 器 、Google 的 Chrome 浏览 器 都 带 有 强大 的 开发 者 工 
具 。 以 Chrome 浏览 器 为 例 (在 百度 上 搜索 Chrome, 可 以 十 分 容易 地 下 载 到 Chrome 的 最 新 版 本 ) ， 
可 以 借助 HTML 文件 来 进行 JavaScript 代码 的 运行 ， 先 来 编写 一 段 简单 的 HTML 代码 ， 如 下 : 

<html> 


<head> 
<title></title> 
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<script type="text/javascript"> 
console.log("Hello World"); 
</script> 
</head> 
<body> 
</body> 
</html> 


用 任何 文本 编辑 器 来 写 这 段 HTML 代码 都 没有 问题 ， 这 里 推荐 使 用 Sublime Text 编辑 器 一 一 
一 款 十 分 优秀 的 跨 平台 代码 编写 软件 ， 最 后 将 此 HTML 文件 的 后 级 保存 为 html。 
使 用 Chrome 浏览 器 打开 此 HTML 文件 ， 会 发 现 页 面 上 一 片 空白 ， 这 没什么 好 奇怪 的 ， 这 里 只 
是 编写 了 一 个 空 的 网 页 模板 ， 其 中 嵌入 了 一 句 JavaScript 脚本 代码 ， 除 此 之 外 ， 我 们 什么 也 没有 做 ， 
那么 如 何 来 验证 JavaScript 代码 的 执行 情况 呢 ? 打开 Chrome 浏览 器 的 开发 者 工具 ， 如 图 1-1 所 示 。 
[CT | 
chromoii# 旧 


打开 晰 的 标签 页 
打开 新 的 春 口 
打开 新 的 隐身 窗口 


查 
将 页 而 存储 为 。 XS EP 
消除 浏览 数据 全 其 | 


任 类 管理 四 有 
编码 > 








ELE EE EE] 
图 1-1 打开 Chrome 浏览 器 的 开发 者 工具 
之 后 可 以 看 到 ， 界 面 被 分 成 了 3 部 分 ， 如 图 1-2 所 示 。 其 中 ， 网 页 区 将 显示 实时 的 网 页 效果 ， 
功能 区 可 以 查看 HTML 标签 、 所 加 载 的 网 络 数据 、 加 载 耗 时 信息 等 。 打 印 调试 区 中 可 以 查看 打印 
信息 ， 也 可 以 进行 JavaScript 代码 的 调试 。 如 图 1-2 所 示 ， 打 印 区 中 打印 出 了 我 们 在 HTML 代码 中 
嵌入 的 “Hello World” 语 句 ， 这 就 是 JavaScript 版 的 HelloWorld 工程 ! 





file:///Users/vip/Desktop/Demo.html 








图 1-2 Chrome 浏览 器 的 开发 者 工具 
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每 次 在 HTML 文件 中 编写 一 些 JavaScript 测试 代码 都 要 重新 刷新 浏览 器 ， 这 对 开发 者 来 说 是 
一 件 无 法 忍受 的 事情 ， 有时, 我们 只 是 想 知道 某 一 行 代码 的 执行 结果 ， 可 以 直接 在 开发 者 工具 的 打 
印 调试 区 进行 代码 的 编写 与 运行 。 例 如 ， 在 其 中 输入 如 图 1-3 所 示 的 代码 。 








Console Emulation Rendering 


© 久 <topframe> v @Preserve log 


> var name = "jaki'; 
var age = '25°'; 
console.log('name: '+name+' '+'age:'+age)il 





1-3 直接 在 Chrome 浏览 器 中 进行 JavaScript 代码 的 调试 
抽 丝 剥 草 


默认 情况 下 ， 当 在 Chrome 开发 工具 的 调试 区 输入 一 行 代码 后 ， 如 果 敲 击 Enter 键 会 直接 运 
行 此 行 代码 ， 若 需要 多 行 输入 ， 需 要 使 用 Shift+Enter 组 合 键 来 进行 换行 。 





1.1.2 ”使 用 Sublime Text 工具 来 编写 JavaScript 代码 


Chrome 浏览 器 提供 的 开发 者 工具 虽然 强大 ， 但 是 只 适用 于 已 完成 项 目的 检查 与 调试 ， 无 法 用 
来 进行 项 目的 开发 。 可 以 编写 JavaScript 代码 的 编辑 器 十 分 多 ， 例 如 专门 开发 大 型 Web 项 目的 
WebStorm 工具 、 小 巧 的 用 于 开发 移动 端 网 页 的 HBuilder 工具 、 通 用 编辑 器 Sublime Text 工具 等 。 
对 于 JavaScript 语法 部 分 的 学 习 ， 强 烈 建议 大 家 使 用 Sublime Text 工具 。 首 先 ，Sublime Text 十 分 
轻 量 ， 占 内 存 极 小 ， 运行 极 快 。 其 次 ，Sublime Text 有 大 量 的 插件 支持 ， 能 够 很 好 地 提供 代码 高 亮 、 
智能 补 全 、 代 码 格式 化 等 高 级 开发 工具 所 提供 的 功能 。 最 重要 的 是 ，Sublime Text 可 以 配置 编译 系 
统 ， 有 了 它 ， 我 们 就 不 再 需要 依赖 浏览 器 来 进行 JavaScript 代码 的 运行 与 调试 了 。 

在 如 下 网 站 可 以 下 载 到 Sublime Text 工具 的 最 新 版 本 : http://www.sublimetext.com/。 

下 载 安装 完成 Sublime Text 工具 后 ， 其 已 经 自 带 了 代码 高 亮 的 功能 ， 可 以 进行 JavaScript 代码 
的 编写 , 但 是 并 没 自动 补 全 、 代 码 格式 化 与 运行 JavaScript 代码 的 功能 ,这些 将 会 在 后 面 一 一 解决 ， 
把 Sublime Text 工具 武装 成 一 款 强 大 的 JavaScript 编辑 器 。 





1.1.3 安装 Sublime Text 插件 管理 器 PackageControl 


Sublime Text 工具 的 插件 十 分 丰富 ， 但 是 如 何 快速 地 找到 并 安装 所 需要 的 插件 依然 不 容易 。 
PackageControl 工具 可 以 帮助 我 们 解决 这 些 问 题 。 
在 Sublime Text 中 有 两 种 方式 可 以 进行 PackageControl 插件 的 安装 。 


(1) 第 一 种 方式 是 直接 在 Sublime Text 的 控制 台 输入 如 下 代码 ， 之 后 按 Enter 键 来 进行 
PackageControl 工具 的 安装 : 
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import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = 
sublime.installed packages path();urllib.request.install opener( urllib.reques 
t.build opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 
"wb') .write(urllib.request.urlopen( 'http://sublime.wbond.net/' +pf.replace('', 
'%$20')) .read()) 


在 Sublime Text 工具 中 使 用 contorl+` 组 合 键 可 以 直接 打开 控制 台 ,将 上 面 的 代码 直接 复制 进去 
即 可 ， 如 图 1-4 所 示 。 





http://sublime.wbond. net/Package%20Control. sublime-package 


yntaxError: invalid syntax 
>> import urllib. request, 05; 
>> import urllib, request, 


rlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read()) 


图 14 使 用 代码 的 方式 进行 PackageControl 工具 的 安装 
由 于 网 络 环境 与 Sublime Text 版 本 更 新 有 太 多 的 不 可 控 性 , 使 用 代码 进行 PackageControl 工具 
的 安装 不 一 定 会 成 功 ， 我 们 也 可 以 直接 下 载 PackageControl 插件 进行 安装 。 可 以 从 如 下 地 址 下 载 
PackageControl 插件 : http://sublime.wbond.net/ Package%20Control.sublime-package。 
下 载 完成 后 , 如 图 1-5 所 示 , 打开 Sublime Text 工具 的 插件 目录 Preferences 一 Browse Packages。 
将 下 载 到 的 PackageControl 安装 文件 放 入 Installed Packages 文件 夹 中 ， 如 图 1-6 所 示 。 












File Edit Selection Find View 
About Sublime Text 
Check for Updates... 让 营 中 人 bearrNarive 开 


Changelog.. 












Services Settings 站， 


Settings ~ Syntax Specific 











Hide Sublime Text 38H | Settings 二 Distraction Free Cache 0_package_c..ime-package 
Hide Others T%H 日 Package Con..ime-package 
Key Bindings Local 
Quit Sublime Text 3Q | Font » Poingee 
图 1-5 打开 Sublime Text 的 插件 目录 图 1-6 将 PackageControl 安装 文件 放 入 


Installed Packages 文件 夹 中 


之 后 将 Sublime Text 完全 关 掉 ， 重 启 Sublime Text， 如 果 可 以 在 Preferences 中 看 到 Package 
Control 项 目 ， 说 明 安 装 已 经 成 功 ， 如 图 1-7 所 示 。 
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EM File Edit Selection Find View Goto 
About Sublime Text 
Check for Updates... 
Changelog... 


Preferences Browse Packages... 
Services Settings 8%， 


Settings - Syntax Specific 


Hide Sublime Text 3H ， Settings -Distraction Free 


Hide Others 下 BEH 
Show Al Key Bindings 


Quit Sublime Text ”中 Q Font 
Color Scheme 
Package Settings 
Package Control 





图 1-7 安装 成 功 PackageControl 工具 


上 面 提供 的 下 载 PackageControl 安装 包 的 地 址 服务 器 在 国外 , 国内 访问 时 常会 出 现 波动 , 如 
果 你 无 法 从 上 面 的 地 址 下 载 PackageControl 安装 包 ， 可 以 尝试 如 下 地 址 : 
http://zyhshao.github.io/file/Package%20Control.sublime-package. 





1.1.4 ”使 用 PackageControl 进 行 JavaScript 代码 智能 提示 插件 的 安装 


对 代码 的 智能 提示 是 高 级 编辑 工具 必 备 的 一 项 功能 。SublimeCodeIntel 是 一 个 全 功能 的 代码 自动 
提示 插件 ， 其 支持 众多 流行 语言 的 代码 智能 提示 ， 例 如 JavaScript、HTML、CSS、Python、PHP 等 。 

使 用 PackageControl 可 以 十 分 方便 地 进行 SublimeCodeIntel 插件 的 安装 , 首先 打开 Sublime Text 
编辑 工具 ，Mac 电脑 使 用 Command+Shift+P 组 合 键 来 打开 命令 行 ， 在 其 中 输入 “package control:” 
来 检索 PackageControl 工具 所 提供 的 命令 , 也 可 以 通过 Sublime Text 一 Preferences 一 Package Control 
直接 打开 PackageControl 命令 行 ， 如 图 1-8 所 示 。 

PackageControl 工具 中 提供 了 许多 易 用 的 命令 ， 如 安装 插件 、 查 看 已 安装 的 插件 列表 、 删 除 插 
件 等 ， 如 图 1-9 所 示 。 











[JE Edt Selection Fnd View Goto 
About Sublime Text 
Check for Updates... 
Changelog.. 










Preferences 






Services p> 








Hide Sublime Text 3%H 
Hide Others RH 
Show All 


Quit Sublime Text ”3Q 





Package Control: Advanced Install Package 
Package Control; Create Package File 
Package Control: Install Local Dependency 
Package Control: List Unmanaged Packages 


Package Control Package Control: Upgrade/Overwrite All Packages 





图 1-8 打开 PackageControl 命令 行 图 1-9 PackageControl 工具 提供 的 命令 
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输入 “Install Package” 后 按 Enter 键 进入 插件 安装 命令 。 此 时 会 进入 插件 列表 ， 如 图 1-10 所 示 。 
在 其 中 输入 “SublimeCodeIntel” 后 按 Enter 键 进 行 安装 即 可 ， 如 图 1-11 所 示 〔( 安 装 需 要 10 
分 钟 左 右 的 时 间 ) ， 如 果 安 装 成 功 ， 在 Sublime Text 一 Preferences 一 Package Settings 中 会 看 到 
SublimeCodeIntel 项 。 
| 


1337 Color Scheme 

1337 - A Color Scheme for dark Sublime Text 

install v1.0.1; github.com/ MarkMichos/1337-Scheme 
1self 

Track your activity with the 1self Sublime Text 2/3 Plugin 
Install v0.0.17; www.1self.co/ 


3024 Color Scheme 
3024 theme for TextMate & Sublime Text 


install v2014.04.29.09.25.21; github.com/Ox3024 

3D Tool Syntax Hilight 

Asynchronous Burst-Mode 3D Tool for Sublime Text 

installv0.1.0; github.com/leoheck/sublime-3d-tool 

42 Headers 

A sublime text plug-in for the students of 42 

install v1.1.0; github.com/Globidev/Sublime-Text-42-Headers Sublimecodelntel 

4GL SublimeCodelntel 
ee Full-featured code intelligence and smart autocomplete engine 
install v2012.02.21.22.22.02; github.com/skarcha/SublimeText2-4GL ss ct 








图 1-10 ”插件 安装 列表 图 1-11 安装 SublimeCodeIntel 插件 


在 执行 install Package 命令 时 ，Sublime Text 工具 会 从 PackageControl 官网 拉 取 一 个 JSON 文 
件 ， 这 个 文件 中 是 所 有 的 Sublime Text 插件 信息 ， 大 小 在 数 兆 左右 ， 不 幸 的 是 ， 这 个 文件 的 拉 取 由 
于 国内 网 络 情况 依然 会 困难 重重 。 笔 者 维护 着 一 个 此 JSON 文件 的 下 载 地址 , 无 法 成 功 拉 取 到 文件 
的 朋友 可 以 尝试 如 下 办 法 ， 通 过 Sublime Text 一 Preferences 一 Package Settings 一 Package Control 一 
Settings-User 打开 用 户 配置 文件 ， 如 图 1-12 所 示 。 
Edit Selection Find View Goto Tools Project Window Help 
About Sublime Text Untitled 


Check for Updates... 
Changelog... 


Preferences 


Hide Sublime Text $8H 
Hide Others Tt%H 
Show Al 


Quit Sublime Text ”3Q 


Package Settings Package Control 


图 1-12 打开 Package Control 用 户 配置 文件 
在 其 中 添加 如 下 配置 信息 : 





"channels": [ 
"http://zyhshao.github.io/file/channel v3.json" 
I 


添加 完成 后 的 配置 文件 看 上 去 如 图 1-13 所 示 。 
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图 1-13 ”进行 用 户 配置 文件 设置 
上 面 将 插件 列表 JSON 文件 的 拉 取 地 址 修改 为 了 








abs (function) 





http://zyhshao.github.io/file/channel_v3.json.。 acos (function) 
es . We tan (function) 
成 功 安装 SublimeCodeIntel 插件 后 ， 尝 试 编写 一 些 cell Cfunction) 
人 本 constructor (variable) 
JavaScript 代码 ， 可 以 看 到 SublimeCodeIntel 插件 的 智能 提 cos Cfunction) 
exp (function 
示 十 分 强大 ， 如 图 1-14 所 示 。 floor (function) 


图 1-14 SublimeCodeIntel 的 代码 智能 提示 


1.1.5 安装 JavaScript 代码 格式 化 插件 


缩 进 规范 的 代码 会 使 我 们 在 编写 程序 时 赏心悦目 ， 在 PackageControl 的 插件 列表 中 输入 
“JsFormat”， 按 Enter 键 进行 此 插件 的 安装 ， 如 图 1-15 所 示 。 





SFormat 

JsFormat 

Javascript formatting for Sublime Text 2& 3 

install v2016.12.21.18.21.08; github.com/jdc0589/JsFormat 
JSCS-Formatter 

Sublime Text 3 Plugin to Autoformat with JSCS 

install v2.0.0; github.com/TheSavior/SublimeJSCSFormatter 
JSML Formatter 


A Sublime Text 3 plugin to help write faster JSML. 
install vO.1.2; github.com/mjkaufer /JSML-Formatter 





图 1-15 ”安装 JsFormat 插件 


安装 成 功 后 ， 同 样 可 以 在 Sublime Text 一 Preferences 一 Package Settings 中 看 到 JsFormat 项 。 
JsFormat 插件 的 使 用 十 分 简单 ， 选 中 要 进行 格式 化 的 JavaScript 代码 ， 使 用 
Control+Option(alt)+F 即 可 对 其 进行 格式 化 。 


1.1.6 在 Sublime Text 中 运行 JavaScript 代码 


前 边 我 们 做 了 很 多 工作 ， 安 装 了 一 些 易 用 的 Sublime Text 插件 ， 这 些 工具 可 以 帮助 我 们 更 加 
愉悦 地 进行 JavaScript 代码 的 编写 ， 代 码 的 编写 是 为 了 运行 ， 就 以 学 习 而 言 ， 能 够 实时 看 到 代码 运 
行 的 结果 也 会 使 学 习 效率 大 大 提高 。Sublime Text 自 带 支持 对 Lua、Python、Ruby 等 语言 的 编译 运 
行 功能 ， 但 是 并 不 支持 JavaScript 语言 ， 我 们 做 一 些 额外 的 配置 ， 来 使 Sublime Text 支持 编译 运行 
JavaScript 代码 。 
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Nodejs 是 一 款 JavaScript 运行 时 编译 环境 ， 并 且 也 是 运行 React Native 工程 的 基础 环境 ,首先 
需要 在 系统 中 安装 Node.js 环境 ， 从 如 下 地 址 可 以 下 载 到 安装 包 : https://nodejs.org/en/。 
安装 完成 Nodejs 后 ， 打 开 终 端 工具 ， 在 其 中 输入 如 下 命令 来 查看 Node.js 的 路 径 : 





$ which node 


打开 Sublime Text 工具 , 选择 其 中 的 Tools 一 Build System 一 New Build System, 如 图 1-16 所 示 。 
在 新 建 的 文件 中 写 入 如 下 信息 : 





{ 
"cmd": ["/usr/local/bin/node", "$file"], 
"selector": "source.js" 
} 
需 上 面 的 /user/local/bin/node 部 分 需要 替换 成 你 在 终端 中 使 用 which node 命令 查找 到 





的 路 径 。 之 后 将 文件 进行 保存 ， 命 名 为 JavaScriptsublime-build 即 可 。 

新 建 一 个 Sublime Text 文件 ， 将 其 命名 为 后 级 为 textjs。 在 Tools 一 Build System 中 将 编译 工具 
设 为 新 创建 的 JavaScript， 编 写 一 段 JavaScript 测试 代码 ， 使 用 Command+B 进行 代码 的 编译 运行 ， 
可 以 看 到 ， 在 Sublime Text 控制 台 打印 出 代码 的 执行 结果 与 所 耗 时 间 ， 如 图 1-17 所 示 。 

到 此 ， 已 经 配置 完成 了 一 款 十 分 快速 且 强 大 的 JavaScript 代码 学 习 工 具 ， 后 面 我 们 将 使 用 
Sublime Text 来 一 步 步 打 开 JavaScript 的 编程 世界 ， 一 起 玩 起 来 吧 ! 


Project Window Help 
Command Palette. 分 %P 
Snippets... 


















[re CV Automatic 
Build SB | Ai 
Build With,.. 合 %B 
ncel Bulld C++ Single File 
Build Results bl Coroo 
lv $ave All on Build - 
Erlang 
Record Macro ^Q Haskell 
Playback Macre ) JavaC 
Save Macro... Lua 


Macros 





Developer 


下 人 D25 
[Finished in 0.1s] 





图 1-16 新 建 编译 工具 图 1-17 在 Sublime Text 编 辑 器 中 进行 JavaScript 代码 的 执行 
1.2 ”人 饮 惧 JavaScript 


JavaScript 虽然 名 字 中 包含 Java， 但 其 和 Sun 公司 的 Java 语言 并 没有 太 大 的 关系 。JavaScript 
是 一 种 解释 性 的 脚本 语言 ， 其 设计 的 初衷 是 嵌入 在 HTML 网 页 中 进行 使 用 ,在 1995 年 由 Netscape 
(网 景 ) 公司 在 浏览 器 上 首先 设计 实现 。JavaScript 实际 上 分 为 3 个 部 分 : ECMAScript 核心 语法 部 
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分 ，DOM 文档 对 象 模型 部 分 和 BOM 浏览 器 对 象 部 分 。 本 书 我 们 主要 使 用 JavaScript 来 进行 React 
Native 应 用 的 开发 ， 因 此 主要 讨论 ECMAScript 核心 语法 部 分 。 


Netscape 公司 最 初 将 其 设计 的 脚本 语言 命名 为 LiveScript， 后 来 为 了 使 其 迎合 市 面 上 非常 流 
行 的 Java 语言 ， 也 为 了 能 使 其 看 上 去 有 些 像 “Java"， 将 其 修改 为 JavaScript。 微 软 公 司 为 了 


取得 技术 优势 ， 在 同时 期 也 推出 了 一 种 叫做 Jscript 的 脚本 语言 来 迎战 JavaScript。 然 而 这 样 
做 的 结果 是 使 得 开发 者 在 编写 前 端 网 页 时 ， 要 额外 地 考虑 许多 不 同 浏览 器 的 兼容 问题 。 为 
了 达成 规范 ，ECMA 国际 (前 身 为 欧洲 计算 机 制造 商 协会 ) 创建 了 ECMA 标准 ， 各 家 的 脚 
本 语言 在 语法 上 实际 上 都 是 对 ECMA 标准 的 实现 。 





1.2.1 JavaScript 的 语法 特点 

JavaScript 是 一 种 对 大 小 写字 母 敏感 的 语言 ， 也 就 是 说 不 论 变量 名 、 函 数 名 还 是 其 他 一 切 东西 
都 是 区 分 大 小 写 的 ， 例 如 下 面 的 代码 声明 了 两 个 完全 不 同 的 变量 : 

// 大 小 写 敏感 

Var name’; 

var NAME; 


如 果 你 熟悉 一 些 编译 型 编程 语言 ， 例 如 C++、Java、Swift， 屠 么 你 可 能 会 固执 地 认为 所 有 的 
变量 都 要 有 强制 的 类 型 以 确定 其 在 内 存 中 分 配 的 空间 大 小 ,学 习 JavaScript 时 你 需要 忘记 这 条 准则 。 
JavaScript 中 的 变量 是 动态 弱 类 型 的 ， 你 可 将 一 个 变量 先 赋值 为 字符 串 类 型 的 值 再 将 其 修改 为 数字 
类 型 的 值 ， 总 之 JavaScript 中 的 变量 没有 特定 的 类 型 ， 你 可 以 将 其 赋值 为 任意 值 。 示 例如 下 : 

// 动 态 类 型 

var dy = "string" // 字 符 串 


dy = 1 // 数 字 
dy = true// 布 尔 


虽然 JavaScript 允许 你 对 一 个 变量 进行 多 种 类 型 值 的 赋值 ， 但 是 在 开发 中 尽量 不 要 这 样 做 ， 
规范 与 国定 意义 的 变量 会 使 其 他 开发 者 赏心悦目 。 





从 原理 上 说 ，JavaScript 是 编译 型 的 ， 在 编译 后 马上 运行 ， 并 没有 中 间 文 件 产生 。 


JavaScript 中 每 行 结尾 的 分 号 可 有 可 无 ， 这 一 点 十 分 类 似 Swift 语言。 注意， 如 果 你 在 同一 行 
中 写 了 多 条 语句 ， 就 需要 使 用 分 号 进行 语句 的 分 隔 。 这 里 强烈 建议 一 行内 只 写 一 条 语句 ， 并 且 加 上 
分 号 。 示 例 代 码 如 下 : 
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// 关 于 分 号 

Var Valuel = 1; 

var value2 = 2; console.log(value2); 

var value3 = 3 // 行 末尾 可 以 省 略 分 号 

在 JavaScript 中 ， 可 以 使 用 反 斜 杠 进 行 字符 串 的 折 行 编写 ， 有 时 这 样 做 可 以 使 代码 看 起 来 更 加 
漂亮 ， 示 例如 下 : 

// 使 用 反 斜 杠 进行 字符 串 的 折 行 

var value4 = "\ 

Welcome to JavaScript \ 

My Good Friend!"; 

console.log(value4); 

任何 编程 语言 都 会 提供 注释 的 能 力 , 一 个 优秀 的 开发 者 不 仅 会 写 代 码 , 更 会 写 注释 。JavaScript 
中 有 两 种 方式 进行 注释 的 编写 , 使 用 双 斜 杠 进行 单行 注释 , 使 用 双 斜 杠 中 间 霸 入 两 个 星 号 来 进行 多 
行 注释 ， 示 例如 下 : 

// 这 里 是 单行 注释 

/* 

这 里 是 

多 行 注释 


有 些 开发 者 认为 过 多 的 注释 并 不 是 一 件 好 事 ， 优 秀 的 程序 代码 应 该 有 一 定 的 字 解 释 能 
这 是 正确 的 ， 但 是 关键 的 注释 也 是 必要 的 ， 在 决定 写 注释 时 ， 应 该 思考 如 下 两 点 : 


(1 ) 如 果 不 写 注释 ， 这 里 的 代码 功能 是 否 一 目 了 然 ， 如 果 是 ， 那 就 不 要 写 注释 。 
(2 ) 此 处 的 代码 是 否 会 产生 歧义 并 且 不 可 优化 ， 如 果 是 ， 请 一 定 要 写 注释 。 





1.2.2 ”JavaScript 中 的 变量 


变量 一 词 来 源 于 数学 ， 其 往往 代表 函数 中 能 够 发 生 改变 的 量 值 。 在 计算 机 语言 中 ， 其 是 存储 
计算 结构 或 表示 值 的 抽象 概念 。 需 要 注意 ， 变 量 有 可 能 是 可 变 的 ， 也 有 可 能 是 不 可 变 的 ， 变量 具体 
的 意义 由 不 同 的 编程 语言 所 定义 。 在 JavaScript 中 ,使 用 var 关 键 字 来 进行 变量 的 声明 (var 是 variable 
单词 的 缩写 ) 。 

准确 地 说 ，JavaScript 中 使 用 var 关键 字 与 变量 名 来 声明 或 定义 变量 。 示 例如 下 : 

// 变 量 的 声明 与 定义 


var a;// 声 明 变量 a 
var b = 1; // 定 义 变量 b 
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关于 声明 与 定义 的 区 别 ， 这 里 有 些 咬文嚼字 ， 借 用 经 典 中 的 经 典 ， 谭 浩 强 老师 编写 的 标准 


本 科教 学 书籍 《C 程序 设计 》 中 的 一 句 话 : 一 般 情 况 ， 把 建立 存储 空间 的 声明 称 为 定义 ， 而 
把 不 需要 建立 存储 空间 的 声明 称 为 声明 ! 





JavaScript 也 允许 在 一 条 语句 中 同时 声明 或 定义 多 个 变量 ， 使 用 逗号 进行 分 割 即 可 ， 其 中 变量 
的 类 型 可 以 都 不 相同 。 示 例如 下 : 

// 多 个 变量 同时 声明 

Var Vl,v2=2,v3="hello"; 

在 对 变量 进行 命名 时 ， 有 两 条 法 则 必须 遵守 : 

(1) 变量 名 的 第 1 个 字符 必须 是 字母 、 下 画 线 或 者 美元 符号 。 

(2) 除了 第 1 个 字符 之 外 ， 余 下 的 字符 可 以 是 下 画 线 、 美 元 符号 或 者 任意 数字 与 字母 。 

下 面 这 些 变 量 名 都 是 合法 的 : 

var _myName_ ,MyName, $name, 3name,n3; 

下 面 这 些 变 量 名 都 是 非法 的 : 

// 不 合法 的 变量 名 

var 3 

Var %2; 

虽然 JavaScript 对 变量 的 命名 比较 自由 ,但 并 不 意味 着 你 在 命名 变量 时 可 以 随心 所 欲 。 正 确 的 
变量 命名 应 该 能 够 做 到 见 形 知 意 , 并 且 从 外 观 上 看 起 来 突 元 自然 。 比 较 著 名 的 变量 命名 方法 有 如 下 
几 种 : 

(1) Camel (驼峰 ) 命名 法 。Camel 命名 法 是 指 变量 的 首 字母 小 写 ， 接 下 来 的 每 个 单词 的 首 
字母 大 写 ， 示 例如 下 : 

// 驼 峰 命 名 法 

var myName; 

(2) Pascal 命名 法 。Pascal 命名 法 是 指 变量 的 首 字母 大 写 ， 其 后 每 个 单词 的 首 字母 也 大 写 。 
Pascal 命名 法 有 时 也 被 称 为 大 驼峰 命名 法 ， 示 例如 下 : 

//Pascal 命名 法 

var MyName; 

(3) 匈牙利 类 型 命名 法 。Camel 与 Pascal 命名 法 只 针对 变量 的 意义 进行 解释 ， 匈 牙 利 类 型 命 
名 法 中 还 加 入 了 变量 的 类 型 ， 其 规则 是 在 Pascal 命名 法 的 基础 上 在 变量 名 的 最 前 边 加 上 变量 类 型 
的 标识 ， 例 如 数字 型 变量 添加 i 标识 ， 字 符 串 变量 添加 s 标识 ， 示 例如 下 : 

// 匈 牙 利 类 型 命名 法 

Var iAge = 257 

Var SName = 'jaki'; 
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表 1-1 列 出 了 常用 类 型 对 应 的 标识 。 
表 1-1 变量 类 型 及 对 应 的 标识 





类 型 














数组 对 象 
布尔 正则 表达 式 





字符 串 








另外， 对 于 一 些 大 小 写 不 敏感 的 编程 语言 ， 也 常常 采用 下 画 线 命名 法 ， 即 单词 与 单词 之 间 使 
用 下 画 线 进行 分 割 ， 示 例如 下 : 


// 下 画 线 命名 法 

Var my_name; 

JavaScript 中 的 变量 还 有 一 个 十 分 有 意思 的 特点 ， 注 意 ， 如 果 你 有 其 他 编程 语言 的 基础 ， 这 点 
可 能 会 颠覆 你 的 经 验 。JavaScript 中 变量 不 一 定 都 要 使 用 var 关键 字 进 行 声明 ， 如 下 的 代码 依然 可 
以 很 好 地 执行 : 

// 未 声明 的 变量 


unKnow = "this is a not declare variable" 


console.log (unKnow); 


JavaScript 解释 器 遇 到 上 面 的 代码 后 会 自动 声明 一 个 全 局 的 变量 unKnow， 在 此 郑重 提醒 ， 这 
个 特点 是 JavaScript 的 便利 之 处 ， 但 也 十 分 危险 ， 在 复杂 程序 中 ， 这 样 做 也 会 使 变量 的 追踪 格外 困 
难 ， 代 码 虽 然 是 让 计算 机 执行 的 ， 但 却 是 让 人 看 的 ， 编 写 代码 的 过 程 本 身 就 是 一 种 艺术 ， 最 优雅 的 
方式 是 将 变量 声明 在 其 使 用 之 前 。 


1.3 JavaScript 中 的 数据 类 型 


变量 用 来 存储 特定 意义 的 值 。 在 JavaScript 中 , 变量 可 以 存储 两 种 类 型 的 值 : 原始 值 和 引用 值 。 
原始 值 和 引用 值 的 区 别 在 于 存储 的 位 置 与 访问 的 方式 不 同 。 原始 值 是 存储 在 栈 中 的 简单 数据 ,引用 
值 是 存储 在 堆 中 的 对 象 数 据 。 这 也 就 是 说 ， 当 你 通过 变量 名 访问 原始 值 时 , 会 直接 访问 到 其 存在 栈 
中 的 数据 ,而 在 使 用 变量 名 访问 引用 值 时 , 会 首先 获取 到 其 存在 栈 中 的 对 象 地 址 , 根据 地 址 再 向 堆 
中 查找 真正 的 对 象 数据 。JavaScript 中 定义 的 原始 类 型 有 5 种 ， 分 别 为 Undefined (未 定义 类 型 )、 
Null ( 空 对 象 类 型 ) 、Boolean (布尔 类 型 ) 、Number( 数 字 类 型 )、String (字符 串 〉 类 型 。 图 
1-18 中 描述 了 原始 值 与 引用 值 的 差异 。 





第 1 章 从 Javascript 开 始 | 


13 





本 


字符 串 原始 值 : “Hello” xxxx0002 地 址 空间 : 
对 象 2{.…} 


p 寺 象 1 引用 值 : xxxx000 
了 寺 象 231 用 值 : xxxx000 





图 1-18 原始 值 与 引用 值 图 示 


原始 值 所 占 的 内 存 大 小 一 般 是 固定 不 变 的 ， 将 其 存储 进 栈 中 可 以 更 快 地 进行 数据 访问 ， 引 
用 值 所 占 的 内 存 大 小 通常 较 大 并 且 不 国定 ， 但 其 地 址 的 大 小 是 固定 不 变 的， 将 其 地 址 存 入 


栈 中 不 会 带 来 任何 性 能 影响 。 在 5 种 原始 类 型 中 ，String 类 型 十 分 特殊 ， 因 为 其 大 小 也 是 不 
固定 的 ， 在 Java、Objective-C 等 语言 中 ， 字 符 串 通常 会 被 定义 为 引用 类 型 ， 但 JavaScript 
中 依然 将 其 作为 一 种 原始 类 型 。 





1.3.1 原始 类 型 


JavaScript 中 定义 的 原始 类 型 有 5 种 : Undefined、Null、Boolean、Number、String。 切 记 ， 


有 这 5 种 原始 类 型 。 原 始 类 型 数据 的 创建 是 直接 使 用 字面 值 来 创建 的 。 


Undefined 类 型 只 有 一 个 值 ， 即 undefined。 其 意义 也 如 其 所 描述 的 那样 ， 它 代表 的 是 未 定义 。 
例如 ,一 个 变量 只 是 被 声明 ,其 值 就 是 undefined， 类 型 就 是 Undefined 类 型 ，JavaScript 中 的 typeof 


关键 字 可 以 用 来 获取 变量 或 值 的 类 型 ， 示 例如 下 : 


//Undefined 类 型 
Var unKnown; 
console.1log(typeof unKnown) ;// 将 打印 undefined 


注意 ， 仅 仅 被 声明 而 未 赋值 的 变量 是 未 定义 的 ， 实 际 上 从 没有 声明 过 的 变量 也 是 未 定义 的 ， 


示例 如 下 : 


// 未 声明 过 的 变量 也 是 未 定义 的 
console.1og (typeof unKnown2) ;// 将 打印 undefined 


typeof 是 一 个 特殊 的 








执行 一 个 没有 返回 值 的 函数 后 ， 也 会 返回 undefined 值 ， 示 例如 下 : 














14 


| ”React Native 全 教程 : 移动 端 跨 平台 应 用 开发 


// 一 个 无 返回 值 的 函数 

function func(){ 
console.log("func"); 

} 

var v1 = func();// 将 打印 func 

console.1log (v1);// 将 打印 undefined 


可 能 你 现在 对 函数 还 不 太 理解 ， 不 用 担心 ， 后 面 我 们 会 专门 学 习 函 数 的 相关 内 容 。 
Null 类 型 是 JavaScript 中 另 一 种 只 有 一 个 值 的 类 型 ， 其 字面 值 为 null。Null 类 型 的 定义 唯一 的 


用 途 是 作为 空 对 象 的 占 位 。 现 在 ， 你 可 能 对 对 象 也 不 太 理 解 ， 在 我 们 介绍 原始 值 与 引用 值 的 时 候 已 
提 到 对 象 ， 对 象 是 一 种 复杂 数据 类 型 ， 对 象 变量 中 实际 存储 的 是 对 象 的 引用 地 址 ，JavaScript 中 对 
象 不 属于 原始 类 型 ， 原 则 上 说 他 们 之 间 并 不 会 产生 强 关 系 ， 然 而 在 实际 开发 中 , 开发 者 往往 需要 一 
种 约定 的 值 来 表示 对 象 为 室 ， 即 要 有 一 个 约定 的 值 来 描述 一 个 无 用 的 地 址 ， 这 个 值 就 是 null， 当 开 
发 者 在 使 用 对 象 前 ， 发 现 变量 中 存储 的 引用 地 址 为 null 时 ， 就 可 以 知道 此 对 象 还 没有 被 初始 化 ， 
或 者 此 对 象 已 经 不 存在 了 。 








如 果 在 JavaScript 中 使 用 typeof 来 对 null 值 进行 类 型 检查 ， 你 会 惊奇 地 发 现 其 返回 的 类 型 是 


object， 这 或 许 是 JavaScript 前 期 实现 上 的 一 个 错误 ， 但 是 其 也 恰恰 与 null 是 空 对 象 的 占 位 这 一 概 
念 完 全 切合 。 因 此 ， 在 ECMAScript 标准 中 沿用 了 这 一 定义 。 示 例如 下 : 


//Null 类 型 
var obj = null; 
console.log (typeof obj); // 将 打印 object 


现实 中 的 很 多 设计 可 能 都 不 是 最 正确 的 ， 却 无 疑 是 最 合适 的 。 一 个 很 有 趣 的 例子 来 自 现代 
的 键盘 设计 ， 明 确 来 说 ， 现 在 的 键盘 布局 并 不 科学 ， 这 种 “QWERTY” 布 局 的 键盘 最 开始 
的 设计 是 为 了 打字 机 所 使 用 ， 正 常 排 序 的 键盘 在 打字 机 打字 速度 过 快 时 ， 往 往 会 产生 卡 顿 


问题 。 为 了 解决 这 个 问题 ， 克 里 斯 托 夫 . 拉 森 * 肖 尔 斯 刻意 将 高 频 字 符 放置 在 相反 的 方向 ， 
以 最 大 限度 地 放 慢 禹 键 速度 。 这 也 就 是 说 ， 现 代 键 盘 的 布局 设计 完全 是 为 了 更 慢 速度 地 打 
字 。 另 一 种 更 科学 的 键盘 布局 方式 为 Dvorak 布局 ， 如 果 在 互联 网 上 搜索 Dvorak 关键 字 ， 

你 会 搜 出 一 万 种 理由 阑 述 这 种 布局 的 好 处 ， 然 而 其 依旧 无 法 成 为 主流 ， 人 们 的 习惯 根深 蒂 
固 并 且 不 会 尝试 去 改变 





Boolean 类 型 中 定义 了 两 个 值 ， 分 别 为 true 与 false。 其 在 逻辑 运算 中 应 用 广泛 。 
Number 类 型 用 来 描述 数字 ， 和 其 他 编程 语言 不 同 的 是 ，JavaScript 中 的 Number 类 型 既 可 以 描 


述 整 数值 ， 也 可 以 描述 浮 点 值 。 示 例如 下 : 


//Number 类 型 

var numl = 100// 整 数值 

var num2 = 3.14// 浮 点 值 
console.1log(typeof numl1) ;// 将 打印 number 
console.1log(typeof num2) ;// 将 打印 number 
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在 数值 前 添加 前 组 ， 可 以 将 其 描述 为 八进制 或 十 六 进 制 的 数值 ， 八 进 制 需要 添加 0 作为 前 绥 ， 
十 六 进 制 需要 添加 0x 作为 前 级 ， 示 例如 下 : 

// 八 进 制 

var num3 = 011;// 对 应 十 进 制 9 


// 十 六 进 制 
var num4 = 0x11;// 对 应 十 进 制 17 


需要 注意 ， 很 多 编程 语言 并 不 介意 数值 量 前 面 是 否 添 加 多 余 的 0，JavaScript 语言 对 这 一 点 
要 求 十 分 严格 ， 多 余 的 0 会 改变 数值 的 进 制 方式 ， 造 成 不 可 控 的 错误 。 





对 于 非常 大 或 非常 小 的 数值 ，JavaScript 中 也 可 以 使 用 科学 计数 法 来 对 其 进行 描述 ， 使 用 字母 
e 来 描述 10 的 e 次 方 ， 示 例如 下 : 

// 科 学 计数 法 

var num5 = 1.01e3;// 对 应 1010 

var num6 = 1111000e-6;// 对 应 1.111 

JavaScript 中 还 定义 了 一 些 特殊 的 数值 ， 比 如 Number.MAX_VALUE 和 Number.MIN_VALUE 
分 别 表 示 Number 类 型 所 能 表示 的 最 大 值 与 最 小 值 ， 示 例如 下 : 

//Number 最 大 可 以 表示 的 值 

console.1og (Number .MAX VALUE);// 打 印 1.7976931348623157e+308 

//Number 最 小 可 以 表示 的 值 

console.1log (Number.MIN_VRALUE) ;// 打 印 5e-324 

当 计算 值 超出 了 Number 类 型 所 能 表示 的 极限 时 ， 即 会 被 认为 是 所 谓 的 无 穷 。JavaScript 中 也 
专门 定义 了 特殊 的 Number 值 来 表示 无 穷 ， 其 中 Number.POSITIVE_INFINITY 表示 正 无 穷 大 ， 
Number.NEGATIVE_INFINITY 表示 负 无 穷 大 ， 它 们 的 值 分 别 为 Infinity 与 -Infinity， 示 例如 下 : 

// 正 无 穷 

console.1og (Number.POSITIVE INFINITY);// 将 打印 Infinity 

// 负 无 穷 

console.10g (Number .NEGATIVE_INFINITY) ;// 将 打印 -Infinity 

JavaScript 中 定义 的 最 后 一 个 比较 特殊 的 Number 值 为 NaN， 是 nota Number 的 缩写 ， 表 示 不 
是 一 个 数字 。 这 个 值 在 字符 串 向 数字 转换 失败 时 被 返回 ， 示 例如 下 : 

//NaN 值 

Var num7 = Number ("w"); 

console.1og (num7) ;// 将 打印 NaN 

需要 注意 ，NaN 十 分 特殊 ， 既 不 可 以 进行 计算 也 不 可 以 进行 比较 ， 并 且 与 自身 也 不 相等 ， 例 
如 如 下 的 比较 将 会 返回 false: 


console.1log(NaN == NaN) ;// 将 打印 false 








16 | React Native 全 教程 : 移动 端 跨 平 台 应 用 开发 


如 果 要 判断 一 个 变量 的 值 是 否 是 NaN， 可 以 使 用 如 下 方法 : 

console.1og (isNaN (num7) ) ;// 将 返回 true 

String 类 型 是 JavaScript 中 唯一 没有 固定 大 小 的 原始 类 型 ， 用 来 存储 多 个 Unicode 字符 。 在 C、 
Java 这 些 语言 中 ， 字 符 和 字符 串 是 两 种 不 同 的 类 型 ， 字 符 使 用 单 引号 包括 ， 字 符 串 则 使 用 双 引 号 
包括 。 在 JavaScript 中, 删 去 了 字符 的 概念 , 字符 串 既 可 以 使 用 单 引 号 包括 也 可 以 使 用 双 引 号 包括 ， 
但 是 如 果 要 在 字符 串 中 嵌 套 字符 串 ， 则 单 双 引 号 必须 交 蔡 使 用 。 示 例如 下 : 


//String 类 型 

var strl = "Hello"; 

var str2 = 'World'; 

var str3 = "Hello ‘'World'"; 


和 C、Swift、Java、Perl 这 些 语言 类 似 ，JavaScript 中 也 定义 了 一 些 转 义 字符 ， 可 参见 表 1-2。 
表 1-2 A 








含义 
mn re 单 引号 
vt I | 3ls 
\b | onnn | 使 用 八进制 代码 表示 字符 
vr 使 用 十 六 进 制 代码 表示 字符 
¥ 使 用 十 六 进 制 Unicode 码 表示 字符 
\ 
1.3.2 引用 类 型 


JavaScript 中 的 引用 类 型 数据 实际 上 指 的 是 对 象 。 对 象 是 一 组 功能 行为 互补 的 数据 集合 ， 其 用 
来 模拟 实现 生活 中 的 事物 。 举 一 个 简单 的 例子 ， 如 果 要 开发 一 款 教学 系统 软件 ,这 个 系统 中 需要 包 
含 老师 和 学 生 两 类 成 员 ， 在 这 个 软件 中 ,老师 就 是 一 种 对 象 ， 学 生 也 是 一 种 对 象 。 老 师 对 象 中 可 能 
会 包含 姓名 、 教 师 编 号 、 专 业 、 所 带班 级 等 ， 学 生 对 象 中 可 能 会 包含 姓名 、 年 龄 、 所 学 课程 、 所 在 
班级 等 。 当 然 , 除了 这 些 描述 对 象 属性 信息 的 数据 外 ， 对象 中 还 需要 包含 一 些 行为 , 例如 老师 要 能 
够 进行 教学 任务 、 学 生 要 学 习 考试 等 。 在 JavaScript 语言 中 ，Object 类 型 就 是 这 样 的 一 种 引用 类 型 ， 
其 创建 出 来 的 实例 被 称 为 对 象 。 

有 两 种 方式 来 进行 对 象 的 创建 ， 可 以 直接 通过 Object 构造 方法 来 新 建 对 象 ， 以 教师 对 象 为 例 ， 
代码 如 下 : 

// 创 建 教师 对 象 

Var teacher = new Object(); 

// 为 教师 对 象 添加 一 些 属性 

teacher.name = ' 理 少 '; 

teacher.age = 25; 


teacher.subject = ‘'JavaScript'; 


// 为 教师 对 象 添加 行为 方法 
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teacher .teach = function(){ 
console .1og(' 正 在 进行 教学 ...'); 
] 7 
上 面 的 代码 为 教师 对 象 添加 了 姓名 、 年 龄 和 所 教科 目的 属性 ， 并 且 为 其 添加 了 一 个 教学 行为 
teach 方法 。 我 们 也 可 以 直接 通过 字面 值 的 方式 来 创建 教师 对 象 ， 示 例如 下 : 
// 字 面值 直接 创建 对 象 
Var teacher2 = { 
name: 'Jaki', 
age:25, 
teach:function(){ 
console.1og ('" 正 在 进行 教学 . . . ') ; 
} 
] 7 
如 果 将 teacher 对 象 与 teacher2 对 象 的 类 型 都 进行 打印 ， 可 以 看 到 它们 都 是 Object 类 型 : 
console.log (teacher);//{ name: ' 理 少 '， age: 25, subject: 'JavaScript', teach: 
[Function] } 
console.log (teacher2);//{ name: 'Jaki', age: 25, teach: [Function] } 
console.log (typeof teacher);//object 
console.log (typeof teacher2);//object 
要 使 用 对 象 的 某 个 属性 ， 有 两 种 方式 来 获取 。 比 较 方 便 且 常用 的 方式 是 点 语法 取 值 ， 示 例 
如 下 : 
// 取 对 象 的 属性 
console.1log(teacher.name) ;// 珀 少 
console.log (teacher.age);//25 
console.log (teacher.subject);//JavaScript 
另外 ， 也 可 以 通过 键 名 字符 串 的 方式 来 获取 对 象 的 属性 ， 示 例如 下 : 
// 通 过 键 名 字符 串 取 值 
console.1log (teacher['name']);// 理 少 
需要 注意 ， 通 过 键 名 字符 串 的 方式 来 取 对 象 的 属性 时 ， 所 传 入 的 键 必须 是 字符 串 类 型 的 。 
对 象 中 定义 的 函数 是 用 来 描述 对 象 的 行为 的 ， 同 样 可 以 使 用 点 语法 来 使 对 象 执行 行为 ， 示 例 
如 下 : 
// 让 对 象 执行 行为 
teacher.teach () ;// 将 打印 正在 进行 教学 . . . 
同样 ， 使 用 键 名 获取 到 的 方法 也 可 以 执行 行为 : 
teacher['teach'] () ;// 将 打印 正在 进行 教学 . . . 
现在 你 可 以 简单 地 理解 了 ， 在 面向 对 象 的 语言 世界 里 ， 万 事 万 物 基本 上 都 是 对 象 〈 并 不 是 全 
部 ) ， 简 单 的 对 象 组 合成 复杂 的 对 象 ， 复 杂 的 对 象 协作 完成 复杂 的 功能 。 在 本 节 ， 我 们 先 不 对 “对 
象 ”做 深入 的 研究 ， 后 面 的 章节 会 介绍 更 加 复杂 的 面向 对 象 机制 。 
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1.4 _ JavaScript 中 的 运算 符 


运算 符 用 来 执行 程序 代码 的 运算 。 一 个 完整 的 表达 式 应 该 由 两 部 分 组 成 ， 六 
算 符 ， 例 如 简单 的 加 法 表达 式 “1+2” 中 ， 数 字 “1” 和 数字 “2?” 都 是 操作 数 ， 符 号 “+ 和 
运算 符 ， 其 作用 是 将 前 后 两 个 操作 数 进行 加 法 运算 。 

在 JavaScript 中 ， 运 算 符 可 以 分 为 如 下 几 类 : 


(1) 算术 运算 符 。 

(2) 赋值 运算 符 。 

(3) 关系 运算 符 。 

(4) 逻辑 运算 符 。 

(5) 位 运算 符 。 

(6) 自 增 、 自 减 、 条 件 、 喜 号 等 特殊 运算 符 。 


本 节 将 向 你 介绍 这 些 运 算 符 的 用 法 。 


1.4.1 算术 运算 符 


算术 运算 符 用 来 做 常用 的 数学 运算 ， 例 如 加 、 减 、 乘 、 除 等 。 符 号 “+” 是 JavaScript 中 的 加 
法 运算 符 ， 数 字 或 者 字符 串 都 可 以 使 用 其 来 进行 相 加 操作 ， 对 应 的 减法 运算 符 为 符号 “-”， 示 例 
如 下 : 

// 加 法 运算 符 

Var Sum = 5+5; 

console.log(sum);//10 

Var newString = "Hello" + " World"; 

console.log (newString);//Hello World 


你 可 能 会 有 疑问 ， 在 JavaScript 中 定义 了 许多 特殊 的 数值 ， 例 如 NaN 与 Infinity， 如 果 在 加 法 
运算 的 操作 数 中 有 这 些 值 ， 会 运算 出 什么 样 的 结果 呢 ? 其 实在 JavaScript 中 ， 这 些 特殊 值 的 运算 方 
式 和 生活 中 的 场景 基本 一 致 。 有 如 下 几 个 规则 : 

(1) 如 果 操 作 数 中 有 一 个 是 NaN， 则 运算 结果 为 NaN。 

(2) 正 无 穷 值 与 正 无 穷 值 进行 加 法 运算 ， 结 果 为 正 无 穷 值 。 

(3) 负 无 穷 与 负 无 穷 值 进行 加 法 运算 ， 结 果 为 负 无 穷 值 。 

(4) 如 果 进 行 数 值 与 字符 串 的 相 加 操作 ， 结 果 会 被 强制 转换 成 字符 串 。 


示例 代码 如 下 : 
// 加 法 运算 中 的 几 个 特殊 规则 


console.1og(1+NaN) ;//NaN 
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console.log (Infinity+Infinity);//Infinity 

console.log(-Infinity + -Infinity)//-Infinity 

console.1log(1+'1');//11 

在 数学 中 与 加 法 互 为 逆 运 算 的 为 减法 , JavaScript 中 使 用 符号 “-” 来 进行 减法 运算 , 示例 如 下 : 

// 减 法 运算 符 

var sub = 10-5; 

console.log(sub);//5 

减法 运算 符 有 一 点 非常 特殊 ， 如 果 其 进行 计算 的 两 个 操作 数 中 有 字符 串 类 型 ， 这 个 字符 串 类 
型 的 数据 可 以 转换 为 数字 ， 则 JavaScript 会 自动 帮 其 转换 成 数字 后 再 进行 减法 运算 ， 如 果 此 字符 串 
数据 不 能 转换 为 数字 ， 则 会 计算 出 NaN 结果 ， 示 例如 下 : 

console.1log("10"-5);//5 

console.10og("10"-"3");//7 

console.log("s"-3);//NaN 

console.1log("10"-"a");//NaN 

针对 一 些 特殊 值 的 减法 运算 ，JavaScript 中 也 定义 了 一 些 规则 : 

(1) 如 果 某 个 操作 数 是 NaN， 则 运算 的 结果 为 NaN。 

(2) 正 无 穷 值 减 去 正 无 穷 值 ， 结 果 为 NaN。 

(3) 负 无 穷 值 减 去 负 无 穷 值 ， 结 果 为 NaN。 

(4) 正 无 穷 值 减 去 负 无 穷 值 ， 结 果 为 正 无 穷 值 。 

(5) 负 无 穷 值 减 去 正 无 穷 值 ， 结 果 为 负 无 穷 值 。 

示例 如 下 : 

// 减 法 运算 中 的 几 个 特殊 规则 

console.1log(1-NaN) ;//NaN 

console.log(Infinity-Infinity);//NaN 





console.log(-Infinity - -Infinity);//NaN 
console.log(Infinity - -Infinity);//Infinity 
console.log(-Infinity - Infinity);//-Infinity 


ee “+” 与 符号 “-” 作 为 一 元 运算 符 时 ， 其 便 成 了 正 号 运算 符 与 负 号 运算 符 。 对 数字 进行 正 
号 或 负 号 运算 时 ， 正 号 运算 会 保持 数字 的 正 负 性 ， 负 号 运算 会 改变 数字 的 正 负 性 ， 示 例如 下 : 


console.10g (+numl1) ;// 不 改变 符号 10 
console.1og (+num2) ;// 不 改变 符号 -10 
console.10g (-numl) ;// 改 变 符号 -10 
console.1og(-num2) ;// 改 变 符号 10 


正 负 运 算 符 还 有 一 个 很 实际 的 用 途 是 可 以 将 字符 串 值 强制 转 成 数字 值 ， 这 在 开发 中 十 分 常 


用 。 示 例如 下 : 


console.1log (typeof +"1")//number 
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JavaScript 中 使 用 乘法 运算 符 “* ”来 进行 乘法 运算 ， 示 例如 下 : 
// 乘 法 运算 符 


Var mul = 3*4; 
console.log (mul);//12 


对 于 乘法 运算 ， 也 存在 下 面 几 条 特殊 的 规则 : 

(1) 如 果 某 个 操作 数 是 NaN， 则 结果 为 NaN。 

(2) 无 穷 值 乘 以 0， 结果 为 NaN。 

(3) 无 穷 值 乘 以 0 以 外 的 其 他 数字 ， 结 果 为 无 穷 值 。 
(4) 无 穷 值 乘 以 无 穷 值 ， 结 果 为 无 穷 值 。 

示例 代码 如 下 : 

// 乘 法 运算 中 的 几 个 特殊 规则 


console.1log(1*NaN) ;//NaN 
console.1log(Infinityx0) 7//NaN 





console.log(Infinity * 1);//Infinity 
console.log(Infinity * -1);//-Infinity 
console.log(Infinity * Infinity);//Infinity 
console.log(-Infinity * -Infinity);//Infinity 
console.log(-Infinity * Infinity);//-Infinity 


运算 符 “/” 在 JavaScript 中 用 来 进行 除法 运算 ， 示 例如 下 : 


// 除 法 运算 符 
var del = 88/10; 
console.log(del);//8.8 


除法 运算 符 对 于 特殊 值 运算 的 规则 如 下 : 


(1) 如 果 某 个 操作 数 是 NaN， 则 结果 为 NaN。 
(2) 无 穷 值 除 以 无 穷 值 ， 结 果 为 NaN。 

(3) 无 穷 值 除 以 任何 数 ， 结 果 为 无 穷 值 。 

(4) 任何 数 除 以 无 穷 值 ， 结 果 为 0。 

(5) 任何 数 除 以 0， 结果 为 无 穷 值 。 

(6) 0 除 以 任何 数 ， 结 果 为 0。 


示例 代码 如 下 : 


// 除 法 运算 中 的 几 个 特殊 规则 

console.1log (10/NaN) ;//NaN 
console.log(Infinity/Infinity);//NaN 
console.log (Infinity/100);//Infinity 
console.log(10/Infinity);//0 
console.1o0g(100/0);//Infinity 
console.1o0g(0/100);//0 
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JavaScript 中 还 支持 进行 求 余数 的 运算 ， 取 余 运 算 也 叫 取 模 运 算 。 符 号 “%” 为 取 模 运 算 符 。 
示例 如 下 : 

// 取 模 运 算 符 

var res = 17%8; 

console.log(res);//1 

var res2 = 10.7%1.5 

console.1og (res2) ;// 约 等 0.2 


对 于 特殊 值 的 取 模 运 算 ， 也 有 如 下 规则 : 

(1) 无 穷 值 对 任何 值 取 模 结果 都 是 NaN 。 

(2) 非 无 穷 值 对 无 穷 值 取 模 结果 为 非 无 穷 值 本 身 。 
(3) 0 对 任何 数 取 模 结果 都 是 0。 

(4) 任何 数 对 0 取 模 结果 都 是 NaN。 


示例 代码 如 下 : 


// 取 模 运 算 中 的 几 个 特殊 规则 

console.log (Infinity%1);//NaN 
console.log(Infinity%Infinity);//NaN 
console.1log (100%Infinity);//100 
console.1og(0%100);//0 
console.10g(100%0);//NaN 


在 很 多 编程 语言 中 ， 取 模 运算 都 不 可 以 以 浮 点 数 作 为 操作 数 。 在 Swift 语言 的 早期 版 本 中 是 


支持 浮 点 数 的 取 模 运算 的 ， 在 Swift3 之 后 的 版 本 中 又 将 这 个 特性 删 去 了 ，JavaScript 是 一 种 
相对 特殊 的 语言 ， 并 没有 对 浮 点 数 取 模 运算 做 太 严格 的 控制 。 





1.4.2 ”赋值 运算 符 


赋值 运算 符 的 作用 是 将 表达 式 的 值 赋 给 变量 。 从 接触 到 JavaScript 语言 开始 , 我 们 就 一 直 在 使 
用 赋值 运算 符 ， 最 简单 的 赋值 运算 符 使 用 示例 如 下 : 
// 赋 值 运算 符 


Var string = "Hello World"; 
JavaScript 中 还 提供 了 一 些 复合 赋值 运算 符 ， 示 例如 下 : 


// 复 合 运算 符 

// 复 合 加 赋值 运算 符 

var vl = 0; 

V1+=10; ”// 相 当 于 vi=v1+10; 
console.log(v1); //10 
V1-=9; ”// 相 当 于 vi=v1-9; 
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console.log(v1);//1 
V1*=10; ”// 相 当 于 v1l=v1*10; 
console.log(v1);//10 
v1/=10; // 相 当 于 v1i=v1/10; 
console.log(v1);//1 

v1&=0; ”// 相 当 于 vl=vlg0; 
console.log (v1);//0 

V11=1; ”// 相 当 于 vi=v1l11; 
console.log(v1);//1 
V1<<=1; ”// 相 当 于 vli=v1i<<1; 
console.log (v1);//2 
V1>>=1; ”// 相 当 于 vi=v1>>1; 
console.log(v1);//1 
V1>>>=1; ”// 相 当 于 vl=v1>>>1; 
console.log (v1); 


其 中 ，“&”“|”“<<” 等 符号 看 上 去 可 能 有 些 卫生 ， 这 些 是 JavaScript 中 的 位 运算 符 ， 后 面 
会 专门 介绍 位 运算 的 相关 知识 , 这 里 你 只 需要 记 住 , 复合 赋值 运算 符 实际 上 是 将 一 个 变量 作为 操作 
数 经 过 计算 后 再 次 赋值 给 它 自身 。 


1.4.3 ”关系 运算 符 


在 代码 的 编写 过 程 中 ， 比 较 操 作 十 分 常用 ， 例 如 比较 两 个 字符 串 是 否 相 同 、 比 较 两 个 数字 的 大 
小 等 。 比 较 运算 符 的 计算 结果 将 会 返回 一 个 布尔 值 ， 通 过 布尔 值 的 真 或 假 可 以 实现 不 同 的 业务 逻辑 。 

数字 之 间 的 比较 是 最 常规 的 比较 ， 示 例如 下 : 

// 数 字 之 间 的 比较 

console.1og(1<2) ;//true 

console.1og(1>2);//false 

console.1og(1==2);//false 


符号 “< ”为 小 于 运算 符 ， 当 第 1 个 操作 数 小 于 第 2 个 操作 数 时 结果 为 tue， 和 否则 结果 为 false。 
“>” 为 大 于 运算 符 ， 当 第 1 个 操作 数 大 于 第 2 个 操作 数 时 结果 为 tue， 和 否则 结果 为 false。 需 要 额 
外 注意 ， 在 JavaScript 中 ， 等 于 运算 符 用 符号 “==” 来 表示 ， 这 和 数学 常识 有 些 差 异 ， 编 程 初学 者 

比较 运算 符 也 可 以 在 字符 串 与 字符 串 间 进 行 比较 操作 ， 字 符 串 的 比较 遵守 这 样 的 法 则 : 逐 字 
符 进行 字符 码 大 小 的 比较 , 如 果 字 符 码 相同 , 则 比较 下 一 字符 直到 比较 出 结果 或 者 比较 完成 所 有 字 
符 。 示 例如 下 : 

// 字 符 串 与 字符 串 进行 比较 


console.log("a">"b");//false 
console.log("a"<"b");//true 





console.log("ss"=="ss");//true 


需要 注意 ， 如 果 是 描述 数字 的 字符 串 进行 比较 ， 依 然 会 遵守 上 面 所 说 的 法 则 ， 例 如 下 面 的 比较 : 
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console.1log("12">"3");//false 

"12">"3" 的 比较 结果 返回 的 是 false， 这 是 正确 的 ， 因 为 JavaScript 解释 程序 会 将 字符 “1” 与 
字符 “3” 的 字符 码 进行 比较 ， 将 结果 返回 。 

数字 和 字符 串 进行 比较 相对 要 刺 手 一 些 。 如 果 是 描述 数字 的 字符 串 与 数字 进行 比较 , JavaScript 
解释 程序 会 将 字符 串 强 制 转换 成 数字 类 型 后 再 进行 比较 ， 例 如 : 

console.1og("3">10);//false 

如 果 是 非 数 字 的 字符 串 与 数字 进行 比较 ， 结 果 将 永远 是 false， 例 如 : 

console.log("a">0);//false 

JavaScript 中 还 可 以 使 用 “>=” 与 “<=” 来 进行 不 小 于 和 不 大 于 的 比较 运算 ， 其 规则 和 “>” 
符号 与 “<” 符 号 一 致 。 示 例如 下 : 


console.1og(12<=12) ;//true 
console.1log(1>=2);//false 


关于 等 于 与 不 等 于 的 比较 在 JavaScript 中 有 两 类 , 一 种 是 相等 比较 “==” 与 不 相等 比较 “!=”， 
另 一 种 是 全 等 比较 “===” 与 不 全 等 比较 “!==”。 全 等 比较 运算 并 非 是 JavaScript 语言 所 独 有 的 ， 
许多 编程 语言 中 都 有 类 似 的 运算 符 ， 例 如 Swift。 

在 进行 相等 或 不 相等 比较 时 ， 不 同类 型 间 数 据 的 比较 遵守 如 下 几 条 原则 : 


(1) 布尔 值 在 比较 运算 前 会 被 转换 成 数值 ，true 转换 成 1，false 转换 成 0。 
(2) 描述 数字 的 字符 串 在 与 数字 进行 比较 前 会 被 转换 成 数字 。 

(3) 对 象 和 字符 串 进 行 比较 前 ， 会 将 对 象 转换 成 字符 串 。 

(4) null 值 和 undefined 值 进行 相等 比较 时 结果 为 true。 

示例 代码 如 下 : 


console.log (true==1) ;//true 
console.1og(2==true);//false 





console.log(false==0) ;//true 
console.1log("11"==11) ;//true 

Var obj = {name:'jaki'}; 

console.1log (obj==" [object Object]") ;//true 
console.1log(1!=2) ;//true 
console.1og(nul1==undefined) ;//true 


需要 注意 ， 如 果 进 行 比较 操作 的 是 引用 值 而 非 原始 值 ， 则 比较 的 实际 是 所 引用 对 象 的 地 址 。 


再 次 提醒 ，NaN 与 NaN 进行 相等 比 





“一 ”与 “!=” 运算 在 进行 比较 前 会 根据 上 面 的 规则 对 操作 数 进行 类 型 的 转换 ， 全 等 运算 符 
“一 ”与 不 全 等 运算 符 “!--” 在 比较 前 不 会 做 任何 类 型 转换 。 换 句 话说 ， 全 等 和 不 全 等 进行 比较 
时 ， 婚 会 比较 类 型 ， 也 会 比较 值 ， 只 有 类 型 和 值 完全 相等 的 两 个 操作 数 才 被 认为 是 全 等 。 示 例如 下 
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// 全 等 比较 
console.1log(11==="11");//false 
console.1log (true!==1) 7;//true 


有 一 个 很 有 趣 的 小 例子 ， 在 JavaScript 中 ， 如 果 下 面 的 代码 输出 false: 


console.1log(ex>1)7 


那么 如 下 代码 将 一 定 输出 true 么 ? 


console.1og (ex<=1) 
答案 是 否定 的 ， 如 果 ex 变量 在 进行 比较 转换 时 被 转换 成 了 NaN， 则 上 面 两 句 输出 的 都 将 是 
false: 


Var ex = "ss"; 
console.1log (ex>1);//false 
console.1og (ex<=1) ;//false 





1.4.4 ”逻辑 运算 符 


逻辑 运算 对 于 一 门 编程 语言 至 关 重要 ， 它 是 分 支 和 循环 结构 的 基础 ，JavaScript 中 支持 的 逻辑 
运算 有 3 种 ， 遇 辑 与 运算 、 逻 辑 或 运算 和 逻辑 非 运算 。 
JavaScript 中 使 用 符号 “&& ”进行 逻辑 与 运算 。 逻 辑 运 算 通常 进行 在 两 个 布尔 类 型 的 操作 数 
之 间 ， 与 运算 需要 遵守 如 表 1-3 所 示 的 运算 规则 。 
表 1-3 与 运算 


操作 数 结果 











上 面 的 运算 规则 可 以 简要 概述 为 : 进行 逻辑 与 运算 的 两 个 操作 数 都 为 ttue， 结 果 才 为 true， 其 
中 有 一 个 操作 数 为 false， 结 果 就 为 false。 

在 有 些 强 类 型 的 编程 语言 中 ， 逻 辑 运 算 符 只 能 在 布尔 值 之 间 进 行 运算 ，JavaScript 中 届 辑 与 运 
算 的 操作 数 可 以 是 任意 类 型 的 ， 并 且 其 运算 结果 也 不 一 定 是 布尔 类 型 的 值 ， 其 规定 如 下 : 

(1) 在 两 个 对 象 间 进 行 逻辑 与 运算 ， 结 果 将 返回 第 二 个 对 象 。 

(2) 在 进行 逻辑 与 运算 的 两 个 操作 数 中 ， 如 果 有 一 个 操作 数 为 null， 则 结果 为 null。 

(3) 在 进行 逻辑 与 运算 的 两 个 操作 数 中 ， 如 果 有 一 个 操作 数 为 NaN， 则 结果 为 NaN。 

(4) 在 进行 逻辑 与 运算 的 两 个 操作 数 中 , 如 果 有 一 个 操作 数 为 undefined, 则 结果 为 undefined。 

示例 代码 如 下 : 
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// 与 运算 的 相关 规则 

Var obj = {name:'jaki'}; 
// 两 个 对 象 进行 逻辑 与 运算 结果 为 第 二 个 对 象 
console.log({}&&obj); 


console. 
console. 
console. 
console. 
console. 
console. 


先 来 看 一 个 十 分 有 趣 的 小 例子 : 


对 上 面 的 结果 


var vl = 10; 
Var v2 = true; 
console.1log (v2&g& (V1++) ) 7 


console.log (v1); 


var v3 = 10; 

Var v4 = false; 
Console.1log(v4&& (V3++) ) 7 
console.log (v3); 


log(nullggtrue);//null 
log(truegg&null);//null 

log (NaNgg&true);//NaN 

log (true&&NaN) ;//NaN 
log(undefinedg&true);//undefined 


1og (true&&gundefined) ;//undefined 


你 能 猜 出 上 面 代 码 中 的 console.log(v1) 与 console.log(v3) 分 别 会 打印 出 什么 样 的 结果 么 ? 
结 





果 是 console.log(v1) 将 打印 11 而 console.log(v3) 将 打印 10。 


是 不 是 有 些许 意外 ? 其 实 很 多 编程 语 


言 在 处 理 逻 辑 运算 时 都 有 这 样 一 种 法 则 : 


如 果 第 一 个 操作 数 已 经 可 以 确定 此 表达 式 的 结果 , 则 不 会 再 执行 第 二 个 操作 数 , 以 上 面 的 代码 为 例 ， 
v4 为 false 时 已 经 可 以 确定 此 与 运算 结果 为 false， 因 此 v3++ 将 不 会 被 执行 到 。 
JavaScript 中 使 用 符号 “||” 进 行 逻辑 或 运算 。 罗 辑 或 运算 遵守 如 表 1-4 所 示 的 运算 法 则 。 


操作 数 1 


表 1-4 或 运算 


结果 




















和 逻辑 与 运算 类 似 ，JavaScript 中 的 逻辑 或 运算 也 不 一 定 会 返回 逻辑 值 。 规 定 如 下 : 


(1) 如 果 有 一 个 操作 数 为 对 象 ， 当 对 象 为 第 1 个 操作 数 时 ， 结 果 为 对 象 本 身 ， 当 对 象 为 第 2 个 


操作 数 时 ,如 果 第 1 个 操作 数 为 false， 则 结果 为 对 象 本 身 , 如 果 第 1 个 操作 数 为 rue, 则 结果 为 true。 


(2) 如 果 两 个 操作 数 都 为 对 象 ， 则 会 返回 第 一 个 操作 数 。 
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示例 代码 如 下 : 

// 或 运算 规则 

console.log (obj||lfalse);//obj 

console.log(truel|obj);//true 

console.log({}1|obj);//{} 

同样 ， 如 果 在 进行 逻辑 或 运算 时 ， 第 一 个 操作 数 已 经 可 以 决定 表达 式 的 值 ， 则 不 会 再 执行 到 
第 二 个 操作 数 处 。 

JavaScript 中 的 逻辑 非 运 算 使 用 “! ”符号 定义 。 需 要 注意 ， 逻 辑 非 运算 一 定 会 返回 布尔 值 。 
逻辑 非 运 算 也 被 称 为 逻辑 取 反 运算 ， 其 遵守 如 表 1-5 所 示 的 规则 。 

表 1-5 非 运 关 
操作 数 结果 


true false 


false true 
当 操 作 数 不 全 是 逻辑 值 时 ， 有 如 下 规则 : 


(1) 如 果 操 作 数 是 对 象 ， 则 返回 false。 
(2) 如 果 操 作 数 是 数字 0， 则 返回 true。 
(3) 如 果 操 作 数 是 非 0 数字， 则 返回 false。 
(4) 如 果 操 作 数 是 null， 则 返回 true。 

(5) 如 果 操 作 数 是 NaN， 则 返回 true。 

(6) 如 果 操 作 数 是 undefined， 则 返回 true。 








1.4.5 ”位 运算 符 


我 们 知道 ， 程 序 中 的 所 有 数 在 计算 机 内 存 中 都 是 以 二 进 制 的 形式 存储 的 。 这 也 很 好 理解 ， 进 
制 的 实质 是 确定 计数 时 着 几 进 一 ， 人 类 有 10 根 手指 ， 因 此 很 久 以 前 的 祖先 开始 就 习惯 了 使 用 十 进 
制 来 计数 。 计算 机 的 核心 是 由 电子 元 件 组 成 的 , 而 电子 元 件 最 容易 描述 的 两 种 状态 便 是 高 电 平 与 低 
电 平 ， 因 此 使 用 二 进 制 计数 是 最 安全 、 最 便捷 的 方式 。 

在 介绍 JavaScript 中 的 位 运算 前 ， 先 来 简单 地 了 解 一 下 JavaScript 中 的 二 进 制 计数 。JavaScript 
中 只 有 一 种 数值 类 型 : 原始 类 型 Number。 但 是 实际 上 ，JavaScript 中 存储 的 数值 有 两 种 ,分 别 为 有 
符号 数 和 无 符号 数 。 其 实 这 和 大 多 数 编程 语言 类 似 , 只 是 有 些 强 类 型 的 语言 会 将 数值 类 型 再 进行 细 
化 ， 比 如 8 位 整 型 、32 位 整 型 、64 位 整 型 、32 位 浮 点 型 或 64 位 浮 点 型 。JavaScript 中 所 有 的 数值 
默认 都 是 32 位 的 (当然 这 样 说 并 不 准确 , 具体 的 位 数 和 计算 机 环境 有 关 , 目前 大 多 都 是 32 位 的 ) 。 
位 数 可 以 简单 理解 为 表示 一 个 数字 需要 多 少 个 二 进 制 位 , 我 们 暂 定 JavaScript 中 所 有 的 数值 都 是 32 
位 的 ， 那 么 8 这 个 十 进 制 数 在 内 存 中 存储 的 数据 如 下 : 
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上 面 每 一 个 方 格 表示 一 个 二 进 制 位 ， 中 间 的 省 略 号 代表 省 略 中 间 的 0， 一 共 32 个 小 方 格 ， 代 
表 32 个 数位 。 

JavaScript 中 所 有 的 数值 创建 时 默认 都 是 有 符号 的 ， 虽 然 存储 一 个 数值 需要 32 位 ， 我 们 能 
操作 的 实际 上 只 有 31 位 ， 最 后 一 位 作为 符号 位 ， 符 号 位 为 0 表示 这 个 数值 是 正 数 ， 符 号 位 为 1 表 
示 这 个 数值 是 负数 。 对 于 正 数 ， 存 储 在 内 存 中 的 二 进 制 数据 很 好 理解 ， 求 得 此 正 数 的 二 进 制 形式 放 入 
内 存 ， 无 用 的 位 补 零 即 可 。 对 于 负数 ， 其 在 内 存 中 存储 的 是 二 进 制 补 码 方式 ， 计 算 补 码 的 步骤 如 下 : 

CT01 确定 该 数 的 绝对 值 的 二 进 制 形 式 。 

C302 对 此 二 进 制 码 求 反 码 (0 和 1 互相 交替 ) 。 

G03 在 反 码 的 基础 上 加 1. 


根据 上 面 的 规则 ， 以 十 进 制 数 -8 为 例 , 其 绝对 值 的 二 进 制 形式 为 0…01000, 对 其 求 反 码 为 1… 
10111， 在 其 基础 上 再 加 1 得 到 1…11000， 即 十 进 制 数 -8 实际 存在 内 存 中 的 数据 如 下 : 
[LT 


相对 于 有 符号 数 ， 无 符号 数 中 并 没有 负数 ， 所 有 的 数值 都 是 正 数 ， 在 这 种 情况 下 ， 正 负 位 就 
失去 了 作用 ， 因 此 对 于 无 符号 数 来 说 ， 其 32 个 二 进 制 位 都 是 用 来 表示 数字 的 。 











计算 机 中 为 什么 要 采用 补 码 的 方式 来 存储 数据 ?对 于 有 符号 数 ， 最 高 位 表示 的 是 符号 ， 如 
果 直 接 进行 二 进 制 形式 的 存储 ， 难 免 会 出 现 这 样 一 种 情况 : 0 可 以 表示 为 正 数 0 和 负数 0， 


这 有 悖 现实 规律 ， 因 此 人 们 采用 补 码 的 方式 来 使 现实 的 数值 与 计算 机 内 存 中 存储 的 二 进 制 
数据 一 一 对 应 ， 正 数 的 补 码 是 其 本 身 ， 负 数 的 补 码 是 其 反 码 加 1， 经 过 这 样 的 计算 后 ， 无 论 
正 数 0 还 是 负数 0 在 计算 机 内 存 中 存储 的 都 是 全 0 码 ， 做 到 了 统一 。 





JavaScript 中 的 Number 数据 可 以 调用 toString() 方 法 来 将 其 转换 成 字符 串 ， 这 个 方法 中 可 以 传 
入 一 个 参数 设置 要 转换 为 数值 的 进 制 。 示 例如 下 : 

var vl = 8; 

console.log(vl.toSstring(2));//1000 

Var v2 = -8; 

console.log(v2.toString(2));//-1000 


toString(2) 表 示 将 数值 转换 成 二 进 制 , 需要 注意 , 这 个 方法 转换 后 将 无 用 的 二 进 制 位 省 略 了 ， 


并 且 对 于 负数 ， 其 并 没有 转换 成 补 码 形式 或 者 有 符号 数 的 二 进 制 形式 ， 而 是 采用 了 在 其 绝 
对 值 二 进 制 形式 的 基础 上 加 符号 ， 这 样 一 来 ， 内 存 中 数据 存储 时 烦琐 的 转换 过 程 对 开发 者 
来 说 都 是 透明 的 ， 开 发 者 可 以 更 轻松 地 理解 自己 所 取 到 的 数值 。 





下 面 将 进入 我 们 本 节 的 正题 : 位 运算 。 位 运算 顾名思义 是 在 二 进 制 位 的 基础 上 进行 运算 ， 其 
直接 对 二 进 制 位 进 操作 。JavaScript 中 支持 的 位 运算 有 7 种 ， 分 别 为 按 位 非 运算 、 按 位 与 运算 、 按 
位 或 运算 、 按 位 异 或 运算 、 按 位 左 移 运算 、 按 位 有 符号 右 移 运 算 和 按 位 无 符号 右 移 运算 。 
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(1) 按 位 非 运 算 使 用 符号 “~” 来 定义 , 也 被 称 为 按 位 取 反 运算 , 即 原 二 进 制 位 是 1 的 变 为 0， 
原 二 进 制 位 是 0 的 变 为 1。 示 例 代码 如 下 : 

var v3 = ~8; 

console.log (v3);//-9 

对 8 进行 按 位 取 反 运算 后 , 结果 将 为 -9, 如 果 将 十 进 制 换 成 二 进 制 表示 , 这 个 过 程 就 很 好 理解 ， 
首先 8 的 二 进 制 形式 如 下 : 
| 0 O's | | 0 | 0 | 1 | 0 | 0 0 

按 位 取 反 后 如 下 : 





























在 编程 中 ， 你 并 不 需要 对 每 一 次 按 位 取 反 操作 都 进行 如 上 推演 ， 上 面 介绍 的 过 程 只 是 原理 ， 
理解 了 原理 后 ， 我 们 可 以 通过 技巧 记忆 的 方式 来 快速 地 得 到 想 要 的 答案 ， 对 数值 的 按 位 取 
反 操 作 实际 上 就 是 将 此 数值 求 负 再 减 1。 





(2) 按 位 与 运算 使 用 “&” 符 号 定义 ， 是 一 个 二 元 运算 符 ， 其 进行 运算 的 两 个 操作 数 的 对 应 
二 进 制 位 分 别 进行 与 运算 后 将 结果 返回 ， 即 如 果 进 行 运算 的 相应 位 都 为 1， 那 么 最 终结 果 数值 的 此 
二 进 制 位 为 1， 和 否则 为 0。 示例 代码 如 下 : 

Var v4 = 1&9; 

console.log(v4);//1 

分 解 上 述 代码 的 计算 过 程 如 下 : 

@ 1 的 二 进 制 码 : 








@ 9 的 二 进 制 码 : 



































0 0 | oo | | 0 | 0 | 1 0 0 1 
@ 进行 按 位 与 运算 后 
[5 "| i [To T° T°。 [°° |,o 1 
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进 制 位 分 别 进行 或 运算 后 将 结果 返回 ， 即 如 果 进 行 运算 的 相应 位 都 为 0， 那么 最 终结 果 数 值 的 二 进 
制 位 为 0， 否则 为 1。 示 例 代码 如 下 : 


var v5 = 8137 
console.log(v5);//11 


分 解 上 述 代码 的 计算 过 程 如 下 : 
@ 8 的 二 进 制 码 : 





























@ 最 终结 果 为 11。 


(4) 按 位 异 或 运算 使 用 符号 “^” 定 义 ， 是 一 个 二 元 运算 符 ， 其 进行 运算 的 两 个 操作 数 的 对 
应 二 进 制 位 分 别 进行 异 或 运算 后 将 结果 返回 , 即 如 果 进行 运算 的 相应 位 不 同 , 那么 最 终结 果 数 值 的 
- 进 制 位 为 1， 否则 为 0。 示例 代码 如 下 : 


var v6 = 8°11; 
console.log (v6);//3 


分 解 上 述 代码 的 计算 过 程 如 下 : 
G@ 8 的 三 进 制 码 : 
@ 11 的 二 进 制 码 : 
[ol ol 


@ 进行 按 位 异 或 运算 后 : 














外 最 终结 果 为 3。 

(5) 按 位 左 移 运算 使 用 符号 “<<” 定 义 ， 其 作用 是 将 二 进 制 数据 向 左 移动 指定 的 位 数 ， 右 侧 
空 出 来 的 位 将 进行 补 零 操 作 ， 需 要 注意 ， 按 位 左 移 操作 并 不 会 影响 符号 位 ， 移 动 过 程 并 不 包括 符号 
位 ， 示 例 代码 如 下 : 


Var v7 = -2<<2; 
console.log(v7);//-8 


分 解 上 述 代码 的 计算 过 程 如 下 : 
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G@ -2 的 二 进 制 码 〈 补 码 ) : 

| 1 直送 二 | a | 1 | 1 | 1 | 1 | 1 0 
@ 进行 左 移 两 位 的 运算 后 : 

六) Te Ee [| 0 
@ 对 补 码 求 原 码 : 
0 © | 0 | ee 0 0 0 0 0 

















@ 最 终结 果 为 -8。 


(6) 与 按 位 左 移 运 算 相 对 应 的 还 有 按 位 右 移 运算 。 需 要 注意 ， 按 位 右 移 运算 有 两 种 :有 符号 
按 位 右 移 运算 与 无 符号 按 位 右 移 运 算 。 其 中 ， 有 符号 按 位 右 移 运 算 与 按 位 左 移 运 算 互 为 逆 运 算 , 使 
用 “>>” 符 号 定义 ， 示 例如 下 : 

var v8 = -8>>2; 

console.log(v8);//-2 


无 符号 按 位 右 移 运算 和 有 符号 按 位 右 移 运算 最 大 的 不 同 在 于 其 在 右 移 时 ， 并 不 保留 符号 位 ， 
会 将 符号 位 一 起 进行 移动 ， 使 用 “>>>” 符 号 定义 。 正 数 的 符号 位 为 0， 因 此 对 正 数 并 没有 影响 ， 
负数 就 不 同 了 ， 示 例如 下 : 

Var v9 = 8>>>2; 

console.1log (v9);//2 

var v10 = -8>>>2; 

console.log (v10);//1073741822 


有 具体 过 程 ， 这 里 不 再 重复 ， 可 以 根据 前 面 的 示例 自行 推导 。 最 后 ， 给 一 个 中 肯 的 建议 ， 由 于 
无 符号 右 移 运算 的 这 种 特性 ， 在 使 用 时 要 极其 小 心 。 


1.4.6 ”特殊 运算 符 


C 语言 中 定义 了 自 增 与 自 减 两 种 运算 符 , 它们 是 很 多 初学 者 的 路 梦 。 你 或 许 猜 到 了 ,JavaScript 
中 也 定义 了 这 两 个 运算 符 并 且 和 C 语言 中 定义 的 用 法 基本 一 致 。 

自 增 运算 符 使 用 符号 “++” 定 义 ， 自 减 运算 符 使 用 符号 “--” 定 义 。 简 单 理解 ， 自 增 运算 符 是 
在 操作 数 本 身 的 基础 上 进行 加 1 运算 , 自 减 运算 符 是 在 操作 数 本 身 的 基础 上 进行 减 1 运算 , 示例 代 
码 如 下 : 





// 自 增 与 自 减 运算 符 
var a = 107 

var b = 10; 

// 进 行 自 增 与 自 减 运算 
+ 十 

oh 


console.1og (a);// 将 打印 11 
console.1log (b);// 将 打印 9 
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需要 注意 ， 自 增 和 自 减 运算 符 既 可 以 放 在 操作 数 后 面 ， 也 可 以 放 在 操作 数 前 面 。 如 果 将 运算 
符 放 在 操作 数 后 面 ， 通 常 称 其 为 “后 置 自 增 / 减 运算 符 ”， 如 果 将 运算 符 放 在 操作 数 前 面 ， 通 常 称 
其 为 “前 置 自 增 / 减 运 算 符 ”。“ 前 置 ” 与 “后 置 ” 虽 然 只 是 一 字 之 差 ， 其 运算 过 程 与 结果 却 大 相 
径 庭 。 

先 来 看 下 面 这 个 例子 : 

// 自 增 / 减 运算 符 的 前 置 与 后 置 


var c= 10; 
var d = 10; 
console.1og (c++);// 将 打印 10 
console.1og (++d);// 将 打印 11 
console.log(c); // 将 打印 11 
console.log(d); // 将 打印 11 


单独 打印 变量 和 变量 d 的 结果 都 将 是 11， 说 明 无 论 是 前 置 自 增 运 算 还 是 后 置 自 增 运算 ， 其 
都 是 在 原 操作 数 的 基础 上 进行 加 1 运算 。 然 而 如 果 对 “c++” 和 “++d” 这 两 个 表达 式 的 返回 值 进 
行 打印 ， 可 以 发 现 前 置 自 增 运算 返回 的 是 运算 完成 后 的 值 ， 而 后 置 自 增 运 算 返 回 的 是 运算 前 的 值 ， 
同样 的 规则 也 适用 于 自 减 运算 符 ， 示 例 代码 如 下 : 


var e = 10; 

var 上 = 10; 
console.log(e--); // 将 打印 10 
console.10g(--f); // 将 打印 9 
console.log(e); // 将 打印 9 
console.1og(f); // 将 打印 9 


在 开发 中 ， 条 件 语句 的 编写 必 不 可 少 ， 然 而 最 简单 的 条 件 结构 也 需要 至 少 3 行 功 能 代码 ， 示 
例如 下 : 
// 条 件 结构 


Var res; 
if(true){ 

res = 10; 
}else{ 

res = 0; 





| 

console.1og (res);// 将 打印 10 

JavaScript 中 提供 了 条 件 运 算 符 “?:” 来 简化 表达 条 件 结 构 ， 上 面 示例 可 以 简化 成 如 下 代码 : 

// 条 件 表达 式 

Var res = true?10:0; 

console.1og (res);// 将 打印 10 

条 件 运算 符 组 成 的 表达 式 结构 为 “逻辑 值 ?表达 式 1: 表 达 式 2”， 当 问号 前 面 的 逻辑 值 为 true 时 ， 
运算 结果 为 表达 式 1 的 值 ， 当 问号 前 面 的 逻辑 值 为 false 时 ， 运 算 结果 为 表达 式 2 的 值 。 
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JavaScript 中 还 定义 了 一 种 逗号 运算 符 , 其 作用 是 将 多 个 表达 式 放 入 一 行 语句 中 执行 , 示例 如 下 : 
// 逗 号 表达 式 
War TL m37T2e1*3s 
console.log(rl),console.log(r2);// 将 打印 4 3 
逗号 运算 符 在 进行 多 个 变量 的 声明 时 十 分 方便 。 
JavaScript 中 还 提供 了 一 个 十 分 特殊 的 运算 符 “delete”，“delete” 运 算 符 用 于 将 对 象 中 的 某 
个 属性 删除 ， 示 例如 下 : 
Var obj = { 
name:" 理 少 "， 
age:25 
] 7 
console.log(obj .name) ;// 将 打印 理 少 


delete obj.name; 
console.1o0g (obj .name) ;// 将 打印 undefined 


关于 对 象 的 更 多 内 容 ， 后 面 章节 会 详细 介绍 ， 这 里 你 只 需要 了 解 “delete ”运算 符 的 作用 即 可 。 


1.4.7 ”运算 符 的 优先 级 与 结合 性 


在 任何 编程 语言 中 ， 运 算 符 的 优先 级 与 结合 性 都 是 一 个 老生 常 谈 的 话题 。 小 学 数学 老师 都 一 
遍 遍 地 告诉 过 我 们 “ 先 乘除 ， 后 加 减 ”的 法 则 。 在 JavaScript 语言 中 ， 也 遵守 类 似 的 法 则 。 例 如 ， 
如 下 表达 式 计算 的 值 是 22 而 不 是 28: 

Var res = 2+5*4; 

console.1og (res);// 结 果 为 22 

所 谓 运算 符 的 优先 级 是 指 不 同 运算 符 在 同一 个 表达 式 当 中 执行 运算 的 先后 顺序 。 优 先 级 高 的 
运算 符 将 优先 被 执行 ， 例 如 上 面 示例 代码 中 “*” 运 算 符 的 优先 级 要 高 于 “+” 运 算 符 ， 因 此 先进 
行 乘法 运算 再 进行 加 法 运算 。 

除了 “优先 级 ”的 概念 ， 运 算 符 还 有 “结合 性 ”概念 。 对 于 优先 级 相同 的 运算 符 ，“ 结 合 性 ” 
决定 了 其 表达 式 中 运算 的 执行 顺序 。 结 合 性 分 为 左 结合 性 和 右 结 合 性 , 左 结合 性 的 运算 符 将 从 左 向 
右 依次 执行 ， 右 结合 性 的 运算 符 将 从 右 向 左 依次 执行 ， 示 例如 下 : 

// 结 合 性 

// 左 结合 性 

var a = 1+2+37// 结 果 为 6， 相当 于 (1+2)+3 

// 右 结合 性 

var b = c = 5;// 相 当 于 c=5; b=c; 


常用 运算 符 的 优先 级 与 结合 性 见 表 1-6。 
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表 1-6 运算 符 的 优先 级 与 结合 















































运算 符 优先 级 结合 性 运算 符 优先 级 结合 性 
小 括号 : 0 19 按 位 无 符号 右 移 :>>> | 12 左 
后 置 递增 : ++ 16 - 小 于 : < 11 左 
后 置 递减 : -- 16 - 小 于 等 于 : 一 11 左 
逻辑 非 : ! 15 右 大 于 : > 11 左 
按 位 非 : ~ 15 右 大 于 等 于 : 一 11 左 
正 号 运算 符 : + 15 右 等 于 : 一 10 左 
负 号 运算 符 : - 15 右 非 等 : = 10 左 
前 置 递增 : ++ 15 右 全 等 : 一 = 10 左 
前 置 递减 : -- 15 右 非 全 等 : ! 一 10 左 
delete 15 右 按 位 与 : & 9 左 
乘法 : * 14 左 按 位 异 或 : ^ 8 左 
除法 : / 14 左 按 位 或 : | 7 左 
取 模 : % 14 左 逻辑 与 : && 6 去 
加 法 : 上 + 13 左 逻辑 或 : | 3 左 
减法 : - 13 左 条 件 : ?: 4 右 
按 位 左 移 : << 12 左 赋值 : = 3 右 
按 位 右 移 : >> 12 左 逗号 0 左 











你 能 猜 出 下 面 代码 的 计算 结果 吗 ? 
// 例 子 


i=3; 


cons 


j=3; 
n=3; 
a = 
b = 
c= 


ole. 


bE 2 
++j 十 


nt+ + 


log(™" 


0 





EE A 


++j; //4+5+6 


n+t+; //3+5+5 


jt tnt" 


"+at" "+bt" "+c);//6,6,6,12,15,13 








无 论 你 对 运算 符 的 优先 级 与 结合 性 记忆 如 何 ， 都 给 出 一 个 建议 ， 如 果 有 控制 运算 顺序 的 必 
要 ， 请 强制 使 用 小 括号 ， 一 目 了 然 ， 省 时 省 心 。 





JavaScript 流程 控制 与 函数 


流程 控制 是 一 门 语言 的 基本 功能 。 试 想 一 下 ， 有 了 流程 控制 ， 程 序 才 有 了 自己 的 选择 性 与 罗 
辑 性 。 在 JavaScript 中 提供 的 流程 控制 语句 与 C 语言 中 支持 的 流程 控制 语句 基本 一 致 ， 但 无 疑 
JavaScript 更 加 灵活 。 本 章 将 向 你 介绍 如 何在 JavaScript 中 使 用 条 件 语句 、 循 环 语句 、 中 断 语 句 等 
流程 控制 语句 结构 。 

函数 是 功能 独立 的 代码 块 ， 虽 然 和 数学 上 函数 的 概念 有 一 些 区 别 ， 但 都 是 用 来 解决 某 种 问题 ， 
通俗 地 说 ， 都 是 由 一 定 的 输入 来 获取 运算 后 的 输出 (虽然 在 编程 中 的 函数 输入 和 输出 都 可 能 为 空 ， 
有 用 的 只 是 运算 过 程 》。 在 JavaScript 中 ， 函 数 和 其 他 数据 类 型 一 样 也 是 一 种 对 象 ， 本 章 将 向 你 简 
单 地 介绍 函数 的 入 门 知 识 。 


2.1 条 件 分 支 结构 


城市 里 遍布 着 各 种 各 样 的 十 字 路 口 ， 十 字 路 口 的 贯通 使 得 城市 的 交通 四 通 八 达 。 在 程序 的 世 
界 中 也 是 一 样 ， 分 支 结构 在 任何 语言 中 都 是 非常 重要 的 一 部 分 , 如 果 没 有 分 支 结构 ， 程 序 处 理 一 个 
简单 的 选择 逻辑 都 将 变 得 十 分 困难 。JavaScript 和 大 多 数 流行 编程 语言 一 样 , 定义 了 两 种 分 支 结 构 ， 
分 别 为 ifelse 分 支 结构 和 switch-case 分 支 结 构 。 


2.1.1 if-else 分 支 结构 


if-else 语句 是 JavaScript 中 最 常用 的 条 件 语句 〈 大 多 数 编程 语言 都 是 如 此 ) 。 使 用 让 语句 ， 开 
发 者 可 以 根据 不 同 的 条 件 做 不 同 的 逻辑 处 理 。 最 简单 的 让 语句 示例 如 下 : 
//if 结构 1 


var condition = 10>5; 
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if (condition) { 

console.1og ("分 支 一 ") ; // 将 进行 执行 
1 
console.1og(" 结 束 ") ; 


让 关键 字 后 面 的 小 括号 中 需要 写 入 一 个 要 进行 判断 的 条 件 ， 此 表达 式 不 一 定 是 严格 的 Boolean 
类 型 ，JavaScript 会 自动 对 其 进行 Boolean 类 型 转换 。 需 要 注意 ， 为 了 减少 歧义 与 出 错 率 ， 建 议 在 
主 条 件 中 编写 严格 返回 Boolean 值 的 表达 式 。 如 果 这 条 件 最 终 为 tue， 则 程序 会 执行 大 括号 中 的 代 
码 块 ， 如 果 证 条件 最 终 为 但 lse， 则 程序 会 跳 过 大 括号 中 的 代码 块 向 后 执行 。 

ifelse 语句 还 有 额外 两 种 结构 ， 示 例如 下 : 

//if 结构 2 

if (condition) { 

console.1o0g ("分 支 一 "); 

}elsef 

console.1og(" 分 支 二 ") ; 





} 

console.1o0g ("结束 "); 

/1/if 结构 3 

if (condition) { 
console.10g ("分 支 一 "); 

}else if(condition2){ 
console.1og(" 分 支 二 ") ; 

}else if(condition3){ 
console.1og(" 分 支 三 ") ; 

}else{ 
console.1o0g ("分 支 四 ")， 

} 

console.1o0g ("结束 "); 


结构 2 与 结构 1 的 区 别 在 于 : 如 果 让 条 件 为 false, 则 结构 1 会 跳 过 让 结构 , 结构 2 会 执行 else 
对 应 大 括号 的 代码 块 。 结 构 3 是 一 种 多 条 件 分 支 结构 ， 会 依次 判断 让 条 件 是 否 为 tue， 遇 到 一 个 让 
条 件 为 true 后 则 将 执行 对 应 的 代码 块 ， 并 且 其 后 的 让 结构 都 会 被 跳 过 。 





2.1.2 ”switch-case 分 支 结构 


在 学 习 switch-case 结构 之 前 ， 我 们 先 来 思考 一 个 简单 的 场景 : 学 生 综 合成 绩 满分 5 分 ， 最 低 
1 分 。 分 数 从 高 到 低 依次 代表 卓越 、 优 秀 、 良 好 、 及 格 和 不 及 格 。 试 编写 JavaScript 程序 来 自动 输 
出 学 生 分 数 对 应 的 档次 。 

使 用 2.1.1 小 节 中 学 习 的 felse 结构 ， 可 以 编写 出 如 下 代码 : 

Var score = 4; 

if (score==1) { 

console.1og ("不 及 格 "); 
}else if(score==2){ 
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console.1og ("及 格 "); 
}else if(score==3){ 

console.1og ("良好 "); 
}else if(score==4){ 

console.1og ("优秀 "); 
}else if(score==5){ 

console.1og ("卓越 "); 
}elsef{ 

console.1og ("无 效 的 分 数 ") ; 
} 


上 面 的 示例 代码 可 以 完成 题目 的 要 求 ， 但 是 大 量 的 if-else 判断 使 代码 变 得 十 分 元 余 ， 看 上 去 
并 不 十 分 简洁 ， 使 用 switch-case 结构 可 以 很 好 地 解决 这 一 问题 。 
switch-case 也 是 JavaScript 语言 中 的 一 种 多 分 支 结构 , 使 用 switch-case 结构 重新 改写 上 面 的 代 


switch (score) { 
case 1:{ 
console.1o0g ("不 及 格 "); 
} 
break; 
case 2:{ 
console.1og(" 及 格 ") ; 
} 
break; 
case 3:{ 
console.1og(" 良 好 ") ; 
} 
break; 
case 4:{ 
console.1og(" 优 秀 ") 
break; 
case 5:{ 
console.1og ("卓越 "); 
} 
break; 
default:{ 
console.1o0g ("无 效 的 分 数 ") ; 
+» 


switch 关键 字 后 面 需 要 指定 一 个 表达 式 , case 子 句 对 应 的 值 如 果 和 此 表达 式 的 值 相 等 ， 则 会 执 
行 此 case 对 应 的 代码 块 。 需 要 注意 ，break 语句 用 于 跳出 switch-case 结构 ， 即 一 旦 某 个 case 匹配 
成 功 ， 则 不 再 进行 后 续 case 的 匹配 ， 这 点 在 开发 中 要 根据 实际 情况 选择 是 否 使 用 break 来 做 跳出 ， 
default 块 则 是 当 所 有 case 匹配 都 失败 后 会 被 执行 的 代码 。 
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许多 类 C 语言 中 的 Switch-case 结构 都 有 一 个 特殊 的 要 求 , 其 进行 匹配 的 值 必须 为 整 型 数据 ， 
JavaScript 则 与 其 不 同 ，switch-case 结构 进行 匹配 的 值 可 以 是 字符 串 甚 至 其 他 变量 。 





2.2 ”循环 结构 


循环 结构 又 叫 迭 代 结 构 ， 用 来 多 次 重复 执行 某 一 段 逻 辑 代码 。 我 们 在 计算 数学 题 时 ， 思 路 是 
向 着 简单 化 与 公式 化 的 ， 因为 人 的 大 脑 有 极限 ,无 法 也 不 可 能 进行 超大 量 的 计算 工作 。 但 是 计算 机 
解决 问题 的 思路 与 之 刚好 相反 , 计算 机 的 运算 速度 非常 快 , 一 般 编程 中 根本 无 须 考虑 运算 性 能 的 问 
题 。 因 此 ， 作 为 开发 者 ， 在 编写 代码 时 更 应 该 考虑 的 是 代码 的 简洁 与 易 读 性 。 


2.2.1 ”while 循环 结构 


如 果 有 人 问 你 从 1 依次 递增 100 的 连 加 结果 是 多 少 。 你 可 能 首先 会 想到 等 差 数 列 的 求 和 公式 : 
首 项 加 末 项 的 和 乘 以 项 数 除 以 二 。 在 编程 中 要 解决 这 个 问题 ， 使 用 循环 结构 将 更 加 简单 。 
下 面 的 示例 代码 分 别 演示 了 使 用 数学 公式 的 方式 和 使 用 循环 结构 的 方式 对 等 差 数 列 进行 求 和 
运算 : 
// 数 学 公式 进行 等 差 数 列 的 计算 1..100 
var res = (1+100)*100/2; 
console.log(res);//5050 
// 使 用 循环 结构 来 进行 计算 
Var i=1; 
Var res2 = 0; 
while (i<=100){ 
res2+=i}; 
i++? 
} 
console.log (res2);//5050 


上 面 示例 代码 中 使 用 到 的 while 结构 是 JavaScript 中 十 分 常用 的 一 种 循环 结构 , while 关键 字 后 
面 需 要 指定 一 个 循环 条 件 ， 当 此 条 件 成 立时 会 执行 while 循环 体 中 的 代码 ， 执 行 完 成 后 ， 会 继续 进 
行 循环 条 件 是 否 成 立 的 判断 ， 如 果 条 件 成 立会 再 次 执行 循环 体 直 到 条 件 不 成 立 为 止 。 

while 循环 还 有 一 种 变 体 ， 其 被 称 为 do-while 循环 结构 ， 与 while 循环 的 区 别 在 于 do-while 结 
构 需 要 先 执 行 一 次 循环 体 ,之 后 进行 循环 条 件 的 判断 ， 如 果 条 件 成 立 , 会 再 次 执行 循环 体 直 到 条 件 
不 成 立 为 止 ， 上 面 的 求 和 运算 使 用 do-while 结构 进行 改写 : 

//do-while 循环 

i=1; 


res3 = 0F 
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dof 

res3+=i; 

++ 7 


}while (i<=100); 
console.log (res3);//5050 


在 编程 中 的 无 限 循环 也 叫做 死 循 环 。 一 般 情况 下 ， 我 们 要 避免 编写 出 死 循环 的 代码 。 使 用 
while 结构 编写 最 简单 的 无 限 循环 如 下 : 


while(true){ 


console.log("..."); 





2.2.2 for 循环 结构 


for 循环 结构 是 比 while 循环 结构 更 加 常用 的 一 种 循环 结构 ， 在 许多 其 他 流行 编程 语言 中 也 是 


如 此 。for 循环 的 基本 编写 格式 如 下 : 


for (init;exp;exc) {} 


其 中 ，init 语句 对 循环 变量 进行 初始 化 ，exp 语句 是 循环 的 条 件 ，exc 语句 用 于 修改 循环 变量 ， 


示例 如 下 : 


//for 循环 

var res4 = 0; 

for (var i = 1; i <= 100; i++) { 
res4+=i; 

} 

console.log(res4);//5050 


for 循环 语句 的 格式 十 分 自由 ，init 语句 、exp 语句 甚至 exc 语句 都 是 可 以 省 略 的 。 如 果 已 经 存 


在 可 以 作为 循环 变量 的 变量 ， 则 init 语句 可 以 省 略 ， 示 例如 下 : 


Var res4 = 07 

Vaz 1 = 1 

for (; 1 <= 100; i++) { 
res4+=i; 

} 

console.log(res4);//5050 


同样 如 果 循 环 变量 不 需要 修改 ，exc 语句 也 可 以 省 略 ， 示 例如 下 : 
//for 循环 


var res4 = 0; 
Var 1 = ly 
Eo x OO 
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res4+=i++? 
} 
console.log(res4);//5050 


需要 注意 ， 如 果 将 循环 条 件 进行 了 省 略 ， 则 for 循环 会 无 限 循 环 下 去 除非 遇 到 中 断 语句 。 


抽 丝 剥 莫 
用 for 循环 结构 编写 最 简单 的 无 限 循环 ， 代 码 如 下 : 


for(;;) 





JavaScript 中 还 提供 了 一 种 严格 的 迭代 结构 for-in 枚 举 。 for-in 枚 举 的 作用 是 用 来 循环 枚 举 出 对 
象 中 所 有 可 枚 举 的 属性 ， 示 例 代码 如 下 : 
for (prop in teacher) { 
/* 
将 输出 
name: 少 
age:25 
subject:JavaScript 
Wk 
console.log(prop + ":" + teacher[prop]); 


2.3 中断 与 跳 转 结构 


JavaScript 中 的 中 断 语句 有 两 种 ， 分 别 为 break 语句 与 continue 语句 。 中 断 语句 与 标签 语句 结 
合 使 用 ， 可 以 更 加 灵活 地 控制 程序 代码 的 执行 流程 。 


2.3.1 break 语句 

在 讲解 switch-case 结构 时 我 们 已 经 使 用 过 break 语句 ，break 语句 是 JavaScript 语言 中 的 一 种 
中 断 结构 ， 在 switch-case 结构 中 ，break 语句 可 以 直接 跳出 当前 的 switch-case 模块 。 同 样 ， 在 循环 
结构 中 ， 也 可 以 使 用 break 语句 来 提前 终止 循环 。 示 例 代码 如 下 : 


//break 语句 
for (Var i=0;i<5;i++){ 
console.1og (i);// 依 次 输出 0，1，2，3 
if (i==3) { 
break; 
} 
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在 上 面 的 代码 中 ， 如 果 不 添 加 break 语句 ， 程 序 将 依次 输出 “0，1，2，3，4”。 添 加 了 break 
语句 后 ， 当 循环 变量 i 自 增 到 3 时 ， 程 序 将 跳出 循环 结构 ， 控 制 台 只 会 输出 “0，1，2，3”。 需 要 
注意 ,break 语句 默认 将 跳出 当前 所 在 的 最 内 层 循环 。 下面 的 代码 演示 如 何在 多 层 循环 中 使 用 break 
语句 : 


for (var i=0;i<3;i++){ 
console.log("i="+i); 
for (var j=0;j<3;j++){ 
if (i==0) { 
break; 
console.1og ("j="+j);? 


} 


从 程序 的 打印 结果 可 以 看 出 ，break 语句 跳出 了 内 层 循环 ， 外 层 循环 依然 继续 执行 。 
对 于 多 层 慌 套 的 循环 ,如 果 需 要 灵活 控制 所 跳出 的 循环 ， 可 以 将 break 语句 与 标签 语句 结合 
用 ， 示 例如 下 : 


label:forl(var i=0;i<3;i++){ 
console.log ("i="+i); 
for (var j=0;j<3;j++){ 
if (i==0) { 
break label; 


} 

console.1o0g ("j="+j); 
} 
CONSOLG. og ("mem 
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/* 

打印 结果 

i=0 

sa 

从 打印 结果 可 以 看 出 ， 上面 代码 中 的 break 语句 直接 跳出 了 外 层 循环 。 标 签 语句 的 格式 十 分 简 
单 ， 在 要 加 标签 的 语句 前 使 用 标签 名 加 冒号 的 形式 标注 即 可 ，break 关键 字 后 面 可 以 指定 一 个 已 存 
在 的 标签 名 来 跳出 特定 的 循环 。 


从 原理 上 讲 循环 结构 是 可 以 无 限 谋 套 的 ， 但 是 在 实际 开发 中 ， 代 码 的 整洁 与 易 读 性 也 十 分 


重要 ， 编 写 循环 结构 时 ， 应 尽量 保持 不 超过 3 层 谋 套 ， 中断 语句 与 标签 语句 的 结合 使 用 可 
以 极 大 地 提高 程序 的 灵活 性 ， 同 时 也 增加 了 代码 的 调试 难度 。 如 果 不 是 非常 需要 ， 尽 量 少 
使 用 标签 语句 ， 如 果 一 定 要 用 ， 请 让 标签 的 命名 更 易于 理解 。 





2.3.2 ”continue 语句 


continue 语句 也 是 JavaScript 中 常用 的 中 断 语句 ， 其 和 break 语句 有 很 大 的 区 别 。break 语句 是 
跳出 当前 的 循环 结构 ， 而 continue 语句 则 是 跳出 本 次 循环 。 示 例如 下 

//continue 语句 
for (var i=0;i<5;i++){ 

if (i==2) { 

continue; 

} 

console.1og (i);// 依 次 输出 0，1，3,4 
} 


从 结果 可 以 看 出 ，continue 语句 的 作用 是 使 程序 仅仅 跳 过 了 循环 变量 i 等 于 2 时 的 输出 代码 ， 
并 不 会 影响 循环 的 再 次 执行 。 同 样 ， 对 于 多 层 循环 结构 ，continue 语句 默认 也 将 跳出 当前 循环 的 本 
次 循环 ， 示 例如 下 : 

for (var i=0;i<3;i++){ 


console.1log("i="+i); 
for (var j=0;j<3;j++){ 


if (j==0) { 
continue; 
3 
console.10g ("j="+j); 
} 
Console, log("=====" 
} 
/* 


打印 结果 
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continue 语句 也 可 以 和 标签 语句 结合 使 用 来 跳出 指定 循环 结构 的 本 次 循环 ， 示 例如 下 : 


label2:forl(var i=0;i<3;i++){ 
console.log ("i="+i); 
for(var j=0;j<3;j++) { 
-| 
continue label2; 
console.10g("j="+j); 
} 
console.1og("=====") 7 
1 
/* 
打印 结果 
i=0 
i=1 
i=2 


要 


需要 注意 ， 上 面 的 代码 没有 打印 出 任何 j 值 的 原因 是 当 判 断 到 j 等 于 0 时 ， 直 接 跳出 了 外 层 循 
环 的 本 次 循环 ， 因 此 内 层 循环 的 循环 变量 j 并 没有 执行 递增 操作 ，j 始终 为 0。 





2.4 ”异常 捕获 结构 


无 论 你 是 经 验 多 么 丰富 的 开发 者 ， 在 运行 所 编写 的 代码 时 ， 一 定 会 发 生 错误 。 在 JavaScript 
引擎 执行 JavaScript 代码 时 ， 会 发 生 各 种 各 样 的 错误 ， 可 能 是 语法 错误 ， 也 可 能 是 数据 处 理 错误 ， 
还 可 能 是 由 于 服务 端 数 据 或 者 用 户 输入 数据 超出 开发 者 意料 发 生 的 逻辑 错误 ， 等 等 。JavaScript 内 
置 了 许多 异常 对 象 , 当 某 些 行为 触发 了 这 些 异常 时 ,程序 会 将 异常 抛 出 并 且 中 断 在 抛 出 异常 的 地 方 。 
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开发 者 可 以 使 用 try-catch 结构 捕获 并 处 理 异 常 来 保证 程序 的 顺畅 执行 ， 同 样 开发 者 也 可 以 使 用 
throw 语句 来 抛 出 一 个 异常 。 





2.4.1 使 用 throw 语句 抛 出 异常 


暴露 错误 和 解决 错误 同样 重要 。 在 开发 中 你 或 许 会 编写 大 量 的 有 参数 输入 的 函数 ， 对 于 实际 
输入 函数 的 参数 ， 有 时 候 并 不 是 你 可 以 决定 的 ， 例 如 我 们 要 编写 一 个 标准 的 除法 程序 ， 代 码 如 下 : 








function div(a,b){ 
return a/b; 
} 


var res = div(3,4); 


console.log(res); 

上 面 的 代码 乍 看 起 来 很 完美 ， 实 际 上 问题 很 多 ， 对 于 一 个 标准 的 除法 运算 ， 首 先 其 除数 与 被 
除数 应 该 都 是 标准 的 数值 类 型 ， 不 可 以 是 字符 串 或 者 其 他 对 和 象 。 其 次 ,除数 与 被 除数 都 不 可 以 为 无 
穷 值 ， 被 除数 也 不 可 以 为 0。 上 面 这 两 条 规则 都 是 在 对 传 入 的 参数 进行 限制 ， 你 或 许 会 想 ， 我 们 并 
没有 方法 控制 用 户 要 输入 的 东西 啊 ， 没 错 ， 但 是 你 可 以 在 用 户 输入 了 错误 数据 时 让 函数 抛 出 异常 ， 
使 程序 中 断 。 

JavaScript 中 使 用 throw 关键 字 来 进行 异常 的 抛 出 ， 修 改 上 面 的 代码 如 下 : 


function div(avb){ 
if ((typeof a) != "number"|| (typeof b) != "number"){ 
throw "must input a Number Value"; 
} 
if (!isFinite(a)|| !isFinite(b)) { 
throw "must input a Number is Finity"; 
} 
if (b===0) { 
throw "Dividend must not be 0"; 
} 
return a/b; 
J 
var res = div(3,4); 
console.log (res); 


当 输 入 非 数值 类 型 的 参数 、 数 值 为 无 穷 的 参数 或 者 被 除数 为 0 时 ， 程 序 会 直接 中 断 ， 并 在 控 
制 台 打印 抛 出 的 异常 信息 ， 如 此 便 十 分 严格 地 对 函数 的 输入 参数 进行 了 约束 。 

使 用 throw 关键 字 进 行 异常 殷 出 的 基本 语法 结构 为 throw exp。 其 中 , throw 为 系统 关键 字 , exp 
是 要 抛 出 的 异常 表达 式 ， 其 可 以 为 任意 类 型 。 例 如 ， 上 面 示例 代码 中 我 们 实际 上 抛 出 的 是 一 个 字符 
串 值 异常 ， 也 可 以 抛 出 数值 、 布 尔 值 或 者 任意 自 定 义 对 象 。 例 如 ， 我 们 可 以 为 某 种 特定 的 错误 类 型 
创建 一 个 专门 定义 的 对 象 ， 示 例如 下 : 

Var InputError = { 

NotNumberError : "must input a Number Value"， 
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FinityError : "must input a Number is Finity", 
DividendError:"Dividend must not be 0" 


J 
function div(a,b){ 
if ((typeof a) != "number" || (typeof b) != "number"){ 
throw InputError.NotNumberError; 
} 
if (!isFinite(a)11 !isFinite(b)) { 
throw InputError.FinityError; 
} 
if (b===0) { 
throw InputError.DividendError; 
} 
return a/b; 
} 


var res = div(3,4); 


console.log(res); 


通过 自 定义 异常 对 象 的 方式 抛 出 异常 有 利于 更 结构 化 和 标准 化 地 对 异常 进行 捕获 与 处 理 。 现 
在 ,你 已 经 学 会 了 如 何在 代码 中 抛 出 异常 , 但 仅仅 抛 出 异常 是 远 远 不 够 的 ， 后 面 我 们 将 学 习 如 何 捕 
获 异 常 、 处 理 异 常 与 传递 异常 。 


2.4.2 ”异常 的 捕获 与 处 理 


JavaScript 代码 中 抛 出 的 异常 如 果 不 进行 处 理 程序 会 直接 中 断 ， 这 是 我 们 不 想 看 到 的 结果 。 
JavaScript 中 的 try-catch-finally 结构 用 来 捕获 和 处 理 异 常 。 依 然 使 用 2.4.1 小 节 所 编写 的 除法 器 来 做 
例子 ， 在 调用 除法 器 函数 时 ， 传 入 一 个 错误 的 参数 : 


Var InputError = { 
NotNumberError : "must input a Number Value"， 
FinityError : "must input a Number is Finity", 
DividendError:"Dividend must not be 0" 
] 7 
function div(a,b){ 
if ((typeof a) != "number" || (typeof b) != "number"){ 
throw InputError.NotNumberError; 
| 
if (!isFinite(a)11!isFinite(b)) { 
throw InputError.FinityError; 
1 
if (b===0) { 
throw InputError.DividendError; 
1 


return a/b; 


第 2 章 JavaScript 流程 控制 与 函数 | 45 





Var res = div("3",4); 

console.log (res); 

不 出 所 料 ， 程 序 运 行 时 会 抛 出 异常 并 直接 中 断 。 在 实际 开发 中 ， 遇 到 异常 后 让 程序 中 断 并 不 
是 一 个 友好 的 选择 〈 尽 管用 户 可 能 输入 的 数据 有 些 随 心 所 欲 )， 我 们 应 该 想 办 法 将 错误 的 信息 提示 
给 用 户 ， 并 且 让 程序 跳 过 这 个 异常 。 很 多 情况 下 ， 一 个 复杂 的 程序 不 只 有 一 个 功能 ， 因 为 某 个 功能 
的 异常 而 退出 整个 程序 是 让 人 无 法 接受 的 。try-catch-finally 结构 在 JavaScript 中 专门 用 来 捕获 与 处 
理 异常 。 











很 多 高 级 语言 都 有 异常 处 理 机 制 ， 有 编程 基础 的 同学 一 定 对 try-catch-finally 十 分 熟悉 ， 在 


Java 语言 中 也 有 这 样 的 结构 。Objective-C 语言 中 对 应 的 结构 为 @try-@catch-@finally。Swift 
语言 中 的 异常 处 理 略 微 复杂 一 些 ， 但 是 也 有 do-catch 结构 。 





将 上 面 的 示例 程序 修改 如 下 : 


Var InputError = { 
NotNumberError : "must input a Number Value", 
FinityError : "must input a Number is Finity", 
DividendError:"Dividend must not be 0" 
}; 
function div(a,b){ 
if ((typeof a) != "number" || (typeof b) != "number"){ 
throw InputError.NotNumberError; 
} 
if (!isFinite(a)11!isFinite(b)) { 
throw InputError.FinityError; 
} 
if (b===0) { 
throw InputError.DividendError; 
3 
return a/b; 
} 
try{ 
var res = div("3",4); 
}catch (e){ 
console.log(e); 
}finally{ 
console.1og ("异常 处 理 结 束 ") ; 
} 
console.1og (res);// 将 打印 undefined 


运行 代码 ， 控 制 台 的 打印 结果 如 图 2-1 所 示 。 
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must ;input a Number Value 
异常 处 理 结束 


undefined 
[Finished in 0.1s] 





图 2-1 进行 异常 捕获 

可 以 发 现 ， 这 次 程序 完整 运行 ， 下 面 我 们 来 解释 控制 台 的 打印 信息 是 如 何 来 的 。 首 先 ， 在 
try-catch-finally 结构 中 的 3 个 关键 字 里 ，try 对 应 的 代码 块 用 来 执行 可 能 会 抛 出 异常 的 代码 ， 实 际 
上 ， 如 果 没有 异常 抛 出 ，catch 结构 就 是 透明 的 ， 如 果 try 关键 字 对 应 的 代码 块 中 有 异常 抛 出 ， 程 序 
首先 会 进入 catch 代码 块 ，catch 代码 块 的 作用 是 对 抛 出 的 异常 进行 捕获 ,其 会 将 抛 出 的 异常 作为 参 
数 传 入 ， 我 们 拿 到 异常 后 ， 可 以 根据 异常 类 型 做 相关 逻辑 处 理 。 异 常 处 理 结束 后 ， 如 果 有 finally 
代码 块 ， 就 会 执行 finally 代码 块 中 的 代码 ， 之 后 结束 异常 捕获 处 理 结构 。 在 try-catch-finally 结构 
中 ， 不 一 定 3 个 代码 块 都 要 存在 ， 可 以 有 如 下 3 种 结构 : 

® try-catch 

® try-finally 

® try-catch-finally 


+ ，finally 代码 块 并 不 对 异常 进行 捕获 ， 无论 有 没有 异常 殷 出 ，finally 代码 块 都 会 被 执 
如 果 没 有 catch 代码 块 但 是 抛 出 了 异常 ， 尽 管 finally 代码 块 存在 ， 程 序 依然 会 中 断 。 








行 ， 同 


2.4.3 ”异常 的 传递 


前 面 你 已 经 学 会 了 如 何 捕获 与 处 理 异常 ， 下 面 我 们 将 除法 器 函数 再 进行 一 层 封 装 ， 将 异常 处 
理 逻 辑 封装 进 新 的 函数 内 部 ,这样 在 其 他 开发 者 调用 这 个 新 的 除法 器 函数 时 就 无 须 再 担心 程序 的 中 
断 了 ， 示 例 代码 如 下 : 
var InputError = { 
NotNumberError: "must input a Number Value", 
FinityError: "must input a Number is Finity", 
DividendError: "Dividend must not be 0" 
}; 
function div(a, b) { 
if ((typeof a) l= "number® || (typeof b) ‘l= "number”) { 
throw InputError.NotNumberError; 
} 
if (!isFinite(a) || !isFinite(b)) { 
throw InputError.FinityError; 


} 
Db OY A 

throw InputError.DividendError; 
} 


return a / pb; 


function newDiv(a,b) { 
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try { 
var res = div(a, b); 
} catch (e) { 
console.1log(e); 
} finally { 


console.1o0g ("异常 处 理 结束 ") ; 


} 
return res; 
} 
Var res = newDiv("3",4); 


console.log (res); 


经 过 优化 后 ， 在 调用 上 面 代码 中 的 newDiv() 函 数 时 ， 无 论 传 入 的 参数 怎样 都 已 经 不 会 再 抛 出 
异常 ， 异 常 已 经 在 newDiv0) 函 数 内 部 被 捕获 并 且 人 处理 了 。 如 果 我 们 不 在 newDiv() 函 数 内 部 对 异常 
进行 捕获 处 理 ， 异 常会 被 继续 向 上 传递 ， 从 newDiv0 函 数 抛 出 ， 示 例如 下 : 


function newDiv(a,b) { 
Ery "| 
var res = div(a, b); 
} finally { 


console.1o0g ("异常 处 理 结束 ") ; 


} 

return res; 
} 
try{ 

Var res = newDiv("3",4); 
}catch(e){ 


console.1o0g ("newDiv 处 理 异 常 ") ; 


} 
控制 台 打 印信 息 如 图 2-2 所 示 。 


屏 常 处 理 结 
ewDiv 处 理 异 常 


ndefined 
Ub | 


图 





2-2 ”异常 的 传递 


在 JavaScript 中 ,一旦 某 个 函数 抛 出 异常 ， 异常 首先 会 传递 到 此 函数 的 调用 方 ， 如 果 调 用 方 有 
对 异常 进行 捕获 处 理 ， 则 异常 不 再 向 上 传递 ， rae 有 对 抛 出 的 异常 进行 捕获 处 理 ， 则 此 异 





常会 继续 传递 到 调用 方 的 调用 方 , 按照 这 样 的 逻辑 一 层 一 层 地 向 上 传递 直到 被 捕获 处 理 或 者 不 再 


有 可 以 处 理 的 调用 方 。 


明白 了 异常 的 传递 机 制 ， 我 们 可 以 更 加 灵活 地 控制 异常 的 传递 ， 将 异常 进行 分 层 处 理 ， 示 例 


代码 如 下 : 
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function newDiv(arb) { 
try { 
var res = div(a, b); 
} catch(e){ 
if (e===InputError.DividendError) { 
res = NaN; 
}else if (e==InputError.FinityError) { 
res = NaN; 


}else{ 
throw e; 
和 
}finally { 
console.1o0g ("内 层 异常 处 理 结束 ") ; 
} 
return res; 
} 
tryt{ 


Var res = newDiv(Infinity,1); 
}catch(e){ 

console.1og ("输入 错误 !"); 
}finallyt{ 

console.1o0g ("外 层 异 常 处 理 结束 ") ; 
} 
console.log (res); 


在 上 面 的 代码 中 ，newDiv0 函 数 只 对 被 除数 为 零 和 参数 有 无 穷 值 的 异常 进行 了 处 理 ， 将 NaN 
直接 作为 结果 返回 ， 如 果 是 参数 类 型 错误 ， 则 newDiv0 函 数 不 做 任何 判断 ， 直 接 将 异常 抛 出 ， 交 
给 调用 方 处 理 。 


2.5 JavaScript 中 的 函数 


几乎 所 有 编程 语言 中 都 有 函数 这 个 概念 ， 从 功能 上 讲 ， 函 数 是 一 组 可 以 随时 运行 的 代码 语句 ， 
函数 是 一 个 代码 块 也 是 一 段子 程序 。JavaScript 是 一 种 面向 对 象 的 语言 ， 在 JavaScript 的 世界 中 ， 
万 事 万 物 都 可 以 是 对 象 。 有 趣 的 是 , 函数 在 JavaScript 中 实质 上 也 是 一 种 功能 完整 的 对 象 。JavaScript 
中 有 3 种 基本 的 方式 来 定义 函数 ， 分 别 为 函数 语句 定义 法 、 函 数 表达 式 定义 法 和 Function 构造 函 


2.5.1 使 用 函数 语句 定义 函数 


JavaScript 中 有 一 种 特殊 的 语法 可 以 直接 定义 函数 ， 在 前 面 的 讲解 中 ， 我 们 也 经 常 使 用 这 种 方 
法 来 定义 函数 ， 示 例如 下 : 
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function outputName (){ 
console.log("Jaki"); 
1 


函数 语句 的 语法 结构 可 以 简化 如 下 : function name(param.….) 人 。 其 中 ，function 为 定义 函数 的 
关键 字 ，name 为 函数 的 名 称 ， 通 过 函数 名 称 可 以 直接 调用 函数 ， 后 面 的 小 括号 中 可 以 定义 函数 的 
形 参 ， 大 括号 中 为 函数 核心 函数 体 ， 其 中 可 以 编写 函数 的 具体 逻辑 代码 。 


形 参 的 全 称 为 “形式 参数 "， 其 在 定义 函数 的 时 候 被 定义 ， 用 来 接收 传 入 函数 的 参数 。 形 参 
在 整个 函数 内 部 使 用 ， 脱 离 函 数 内 部 ， 形 参 将 没有 任何 意义 。 与 形 参 对 应 的 还 有 实 参 ， 实 


参 的 全 称 为 “实际 参数 "， 其 是 函数 在 调用 时 确 确 实 实 传递 给 函数 的 参数 。 一 般 情 况 下 ， 在 
调用 函数 的 时 候 ， 实 参 传 递 给 形 参 并 且 一 一 对 应 ， 但 是 在 JavaScript 语言 允许 开发 者 传 入 的 
实 参 与 形 参 并 不 对 应 。 





下 面 我 们 来 定义 一 个 带 参数 和 返回 值 的 函数 ， 代 码 如 下 : 


function outputHello (name){ 





return "Hello "+name; 
} 
console.1log (outputHello ("Lcuy"));// 打 印 出 Hello Lcuy 
上 面 的 函数 需要 传 入 一 个 姓名 作为 参数 ， 将 姓名 拼接 上 “Hello” 字 符 串 后 返回 。 在 JavaScript 
中 ， 函 数 的 返回 值 不 需要 专门 定义 (和 其 他 主流 编程 语言 有 所 区 别 ) ， 直 接 使 用 return 关键 字 进 行 
返回 即 可 。 





事实 上 ， 在 JavaScript 中 任何 一 个 函数 都 有 返回 值 ， 如 果 不 显 式 地 使 用 retum 关键 字 进 行 返 
回 ， 或 者 只 使 用 了 return 关键 字 ， 而 没有 返回 任何 值 ， 函 数 实际 的 返回 值 为 undefined。 





JavaScript 语言 是 通过 函数 语句 语法 定义 的 函数 , 函数 的 调用 和 函数 的 定义 并 没有 严格 的 顺序 ， 
其 实 我 们 也 可 以 先 调用 某 个 函数 ， 之 后 再 进行 此 函数 的 定义 ， 示 例 代 码 如 下 : 
// 先 调用 
console.1log (outputHello ("Lecuy"));// 打 印 出 Hello Lcuy 
// 后 定义 
function outputHello (name){ 
return "Hello "+name; 


} 

上 面 的 代码 可 以 顺利 执行 的 原因 很 简单 ，JavaScript 语言 中 有 “变量 提升 ”这 样 一 种 概念 。 在 
程序 执行 之 前 ，JavaScript 解释 器 会 将 全 局 声明 的 变量 、 定 义 的 函数 等 进行 预 处 理 ， 因 此 在 代码 层 
面 ， 函 数 的 调用 是 在 定义 前 还 是 定义 后 都 无 关 紧 要 。 
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2.5.2 ”使 用 函数 表达 式 定义 函数 


前 面 我 们 讲 过 ， 函 数 是 一 种 功能 完整 的 对 象 , 在 JavaScript 中 也 可 以 使 用 函数 表达 式 来 定义 函 
数 对 象 。 函 数 表 达 式 看 上 去 与 函数 语句 十 分 相似 ， 示 例 代码 如 下 : 

// 函 数 表 达 式 

var outputAge = function(age){ 

console.log("My age is "+age); 

] 7 

outputAge (25) ;// 将 打印 My age is 25 

上 面 的 代码 在 定义 函数 时 ， 等 号 左边 是 一 个 变量 ， 等 号 右边 是 一 个 函数 表达 式 。 函 数 表达 式 
实质 上 返回 了 一 个 函数 对 象 ， 将 其 赋值 给 outputAge 变量 ， 之 后 通过 outputAge 变量 便 可 以 直接 对 
其 所 指向 的 函数 进行 调用 。 需要 注意 , 函数 表达 式 与 函数 语句 的 最 大 语法 区 别 在 于 其 可 以 省 略 函数 
名 ， 也 可 以 理解 为 函数 表达 式 创建 了 一 个 匿名 函数 。 

函数 表达 式 也 可 以 创建 有 名 称 的 函数 ， 这 在 编写 递归 函数 时 十 分 重要 ， 其 方便 了 函数 进行 自 
调用 ， 示 例如 下 : 

// 定 义 一 个 递归 阶乘 函数 


Var mathFunc = function mathF (a){ 
Var res = a; 
A 
if (a>0) { 
res *= mathFunc (a); 
} 
return res; 
}; 
Var mathRes = mathFunc (5); 
console.log (mathRes);//120 


需要 注意 ， 函 数 表达 式 定义 的 函数 名 只 能 在 函数 内 部 使 用 ， 对 外 部 来 说 ， 其 实质 上 还 是 一 种 
医 名 函数 。 

还 有 一 点 需要 特别 注意 ， 函 数 表达 式 定义 的 函数 在 函数 定义 之 前 是 不 能 够 进行 调用 的 。 你 或 
许 会 觉得 奇怪 ，JavaScript 解释 器 不 是 会 将 一 些 全 局 定义 预 处 理 吗 ? 没 错 ， 只 是 函数 表达 式 的 实质 
是 将 一 个 函数 对 象 赋值 给 了 一 个 变量 ，JavaScript 解释 器 只 是 预先 定义 好 了 变量 符号 ， 在 表达 式 未 
执行 之 前 ， 此 变量 实际 是 undefined， 函 数 并 不 存在 。 这 也 是 函数 表达 式 与 函数 语句 的 男 一 重大 区 
别 , 函数 语句 定义 后 的 函数 名 是 无 法 修改 的 ,而 函数 表达 式 定义 的 函数 只 是 将 函数 对 象 赋值 给 了 变 
量 ， 变 量 可 以 重新 赋值 ， 也 可 以 将 函数 传递 给 另 一 个 变量 ， 示 例如 下 : 

// 函 数 表 达 式 


var outputAge = function (age)1{ 








console.log("My age is "+age); 
i 
// 将 outputage 函数 传递 给 新 的 变量 
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Var newFunc = outputAge; 

// 重 新 对 outputage 赋值 

outputAge = "Hello world"; 

newFunc (25) ;// 将 打印 My age is 25 
console.1log (outputAge);// 将 打印 Hello world 


2.5.3 ”使 用 Function 构造 函数 


函数 在 JavaScript 中 是 功能 完整 的 对 象 ， 关 于 对 象 你 现在 了 解 的 可 能 并 不 深入 ， 不 用 担心 ,我 
们 后 面 会 有 专门 的 章节 介绍 JavaScript 中 的 对 象 。 现 在 你 只 需要 简单 知道 对 象 是 属性 和 方法 的 包装 
即 可 。JavaScript 中 也 可 以 通过 Function 对 象 和 new 关键 字 来 构造 函数 对 象 ， 简 单 代码 示例 如 下 : 

Var output = new Function("name","console.1log (name);"); 


output ("Jaki");// 将 打印 输出 Jaki 


Function 构造 函数 的 结构 可 以 简化 为 Function(param,param..…,funcbody)。Function 构造 函数 中 
的 参数 个 数 并 不 固定 ， 最 后 一 个 参数 为 创建 函数 的 函数 体 ， 前 面 所 有 的 参数 都 将 作为 函数 的 形 参 。 
需要 注意 ， 所 有 的 参数 类 型 都 需要 为 字符 串 类 型 ， 函 数 体 也 可 包装 成 字符 串 。 

事实 上 , 无 论 通过 哪 种 方式 创建 的 函数 实质 上 都 是 Function 类 型 的 对 象 。Function 实例 对 象 中 
有 一 些 内 置 的 属性 ， 常 用 的 有 arguments 属性 与 length 属性 。arguments 属性 将 返回 一 个 数组 结构 
数据 ， 数 组 中 为 开发 者 传 入 的 所 有 实 参 。length 属性 将 返回 函数 形 参 的 个 数 。 有 了 arguments 属性 ， 
我 们 在 使 用 函数 的 时 候 就 不 必 从 形 参 获取 外 界 传递 进 函 数 内 部 的 数据 了 ， 示 例如 下 : 

function myFunc(){ 


// 将 传 入 的 参数 倒叙 输出 


for (var i = arguments.length - 1; i >= 0; i--) { 





console.log (arguments [i]); 
} 
} 
myFunc (1,2,3);// 将 输出 3，2，1 


需要 注意 , 函数 对 象 的 arguments 属性 内 部 也 有 一 个 length 属性 , 它 是 数组 对 象 内 置 的 属性 ， 
用 于 获取 数组 中 元 素 的 个 数 ， 并 不 是 函数 对 象 的 length 属性 。 





函数 对 象 是 可 以 直接 被 调用 执行 的 ， 无 论 是 使 用 Function 构造 函数 还 是 使 用 函数 表达 式 定义 
函数 , 实际 上 都 是 创建 了 一 个 函数 对 象 , 将 其 赋值 给 了 一 个 变量 。 对 于 一 些 只 需要 在 创建 时 执行 一 
次 就 不 再 需要 的 函数 ， 也 可 以 使 用 如 下 方式 编写 : 


(function(){ 





console.log("run self"); 
}) () ;// 将 打印 run self 


上 面 这 种 函数 的 应 用 方式 在 实际 开发 中 应 用 十 分 广泛 ， 可 以 用 来 包装 作用 域 ， 隐 藏 某 些 内 部 
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向 Java、C++、Swift 编译 型 语言 一 样 ，JavaScript 也 是 一 种 面向 对 象 的 语言 。 在 面向 对 象 的 语 
言 世 界 里 ， 大 多 数 都 是 基于 类 的 〈 可 以 想象 ,必须 先 有 类 才能 构造 实例 ) ,但 JavaScript 另辟蹊径 ， 
其 抛弃 了 类 的 概念 ， 通 过 原型 来 实现 类 的 功能 ， 也 就 是 说 ，JavaScript 是 一 种 基于 原型 的 面向 对 象 
语言 。 在 JavaScript 中 ， 除 了 几 种 原始 类 型 外 ， 万 事 万 物 都 是 对 象 。 


3.1 初 识 JavaScript 对 象 


“对 象 ”一 词 相信 你 并 不 陌生 ， 前 面 的 章节 中 我 们 也 有 意 无 意 地 多 次 提 到 过 对 象 这 个 概念 。 
在 程序 的 世界 里 ， 对 象 用 来 描述 某 个 特定 的 事物 ， 是 现实 世界 中 事物 的 抽象 。 面 向 对 象 是 一 种 软件 
开发 方式 ,在 程序 中 使 用 对 象 技术 来 描述 现实 中 的 事物 ， 可 以 使 程序 代码 更 易 理 解 维护 ， 同 时 抽象 
性 、 封 装 性 和 可 重用 性 都 会 大 大 提高 。 








从 描述 问题 的 方式 来 看 ， 编 程 语言 可 以 简单 地 分 为 面向 过 程 语言 和 面向 对 象 语言 。 面 向 过 


程 语 言 以 “数据 结构 + 算法 ”的 模式 来 解决 问题 。 面 向 对 象 语言 使 用 “对 象 + 消 息 ” 的 模式 
来 解决 问题 。 相 比 之 下 ， 面 向 过 程 语言 编写 的 程序 更 简洁 、 更 快 ， 适 合 进行 科学 计算 。 面 
向 对 象 编 写 的 程序 更 抽象 、 更 易 懂 ， 适 合 解决 现实 生活 中 的 问题 。 





3.1.1 在 JavaScript 中 创建 对 象 


JavaScript 是 一 种 基于 对 象 的 脚本 语言 ， 不 仅 可 以 使 用 语言 内 置 的 许多 对 象 ， 还 可 以 创建 自己 
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所 需要 的 对 象 。 使 用 字面 量 创 建 一 个 对 象 的 语法 非常 简单 , 只 需要 使 用 大 括号 将 需要 封装 的 属性 和 
方法 进行 包 庄 即 可 ， 示 例如 下 : 

var teacher = {}; 

console.1log (typeof teacher);// 将 打印 object 


上 面 的 第 一 句 代码 创建 了 一 个 空 对 象 ， 将 其 赋值 给 了 变量 teacher。 如 果 使 用 typeof 运算 符 对 
teacher 变量 的 类 型 进行 检查 ， 你 会 发 现 它 实际 上 是 object 类 型 ， 即 对 象 类 型 。 一 般 我 们 创建 对 象 ， 
是 为 了 描述 某 个 事物 。 以 teacher 对 象 为 例 ， 我 们 想 让 它 描述 一 个 教师 的 个 人 信息 和 行为 ， 一 个 空 
的 对 象 是 没有 实际 用 途 的 ， 为 teacher 对 象 添加 一 些 属性 和 行为 ， 代 码 如 下 : 

Var teacher = { 

name:" 理 少 "， 
age:25, 
subject:"JavaSscript", 
teaching:function(){ 
console.1og ("开始 教学 ") ; 
}, 
relaxing:function(){ 
console .1og ("开始 讲 故 事 ") ; 
} 

}; 

上 面 的 代码 为 teacher 对 象 添加 了 3 个 属性 和 2 个 行为 。name 属性 用 来 描述 教师 的 姓名 ，age 
属性 用 来 描述 教师 的 年 龄 ，subject 属性 用 来 描述 教师 的 教学 科目 。teaching 行为 用 来 描述 教师 的 教 
学 动作 ，relaxing 行为 用 来 描述 教师 的 休息 动作 。 你 应 该 明白 了 ， 属 性 描述 的 都 是 一 些 对 象 信息 ， 
其 语法 很 像 键 值 对 ， 冒 号 左边 是 属性 名 ， 冒 号 右边 是 属性 值 。 行 为 描述 的 都 是 对 象 动作 ， 在 语法 上 
冒号 左边 是 行为 名 称 ， 冒 号 右边 是 行为 函数 。 








对 象 属性 的 值 可 以 是 任何 类 型 ， 也 可 以 是 另 一 个 对 象 。 


使 用 “点 语法 ”可 以 方便 地 访问 对 象 的 属性 和 调用 对 象 的 方法 。 示 例如 下 : 


console.log(teacher.name) ;// 打 印 教师 的 姓名 
console.1log (teacher.age);// 打 印 教师 的 年 龄 
console.1og (teacher.subject);// 打 印 教师 的 专业 
teacher .teaching() ;// 执 行 教学 动作 
teacher.relaxing() ;// 执 行 休息 动作 


除了 点 语法 , JavaScript 中 还 可 以 通过 中 括号 法 来 访问 对 象 属性 与 调用 对 象 的 方法 , 示例 如 下 : 


console.log(teacher["name"]) ;// 打 印 教师 的 姓名 
console.1og (teacher["age"]);// 打 印 教 师 的 年 龄 
console.log(teacher["subject"]) ;// 打 印 教师 的 专业 
teacher ["teaching"] () ;// 执 行 教学 动作 
teacher["relaxing"] () ;// 执 行 休息 动作 
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需要 注意 ， 使 用 中 括号 法 访问 对 象 的 时 候 ， 中 括号 中 的 值 必 须 为 字符 串 类 型 。 


3.1.2 ”设置 对 象 的 属性 和 行为 


3.1.1 小 节 中 在 创建 teacher 对 象 时 就 已 经 为 这 个 对 象 添加 了 一 些 属性 和 方法 。 很 多 时 候 对 象 并 
不 是 一 成 不 变 的 ， 现 实生 活 中 也 是 这 样 ， 比 如 几 个 月 前 笔者 还 在 教 Swift 编程 语言 ， 现 在 已 经 在 和 
你 交流 JavaScript 了 。 其 实 ， 我 们 可 以 随时 为 已 经 存在 的 对 象 添加 新 的 属性 方法 或 者 修改 某 个 属性 
与 方法 。 为 对 象 追 加 或 修改 属性 与 方法 的 语法 也 十 分 简单 ， 示 例如 下 : 

// 修 改 对 象 

teacher.subject = "Swift";// 将 专业 修改 为 Swift 

teacher .teaching = function(){ 

console.log("Teaching Swift"); 

}; 

teacher.students = ["July", "Jeke", "Even"];// 添 加 一 个 学 员 列 表 

console.log (teacher); 


同样 ， 使 用 方 括号 法 也 可 以 完成 对 象 的 设置 ， 示 例如 下 : 


// 修 改 对 象 
teacher["subject"] = "Swift";// 将 专业 修改 为 Swift 
teacher["teaching"] = function(){ 


console.log("Teaching Swift"); 
}; 
teacher["students"] = ["July", "Jeke", "Even"];// 添 加 一 个 学 员 列 表 
console.log (teacher); 


你 一 定 还 记得 , 我 们 在 学 习 运 算 符 的 时 候 提 到 delete 运算 符 , 它 的 作用 就 是 删除 对 象 的 菜 个 
属性 或 行为 。 





在 阅读 JavaScript 代码 时 ， 你 可 能 会 发 现 一 个 出 现 频率 非常 高 的 关键 字 : this。 在 对 象 内 部 行 
为 使 用 的 this 关键 字 将 指向 当前 对 象 本 身 〈 这 是 一 般 情 况 ， 并 不 是 必然 情况 ，this 的 指向 会 随 着 运 
行 环 境 或 调用 者 而 灵活 修改 ) 。 例 如 : 


Var Person = { 
name:"Jaki", 
sayHi:function(){ 
console.log("Hi,My name is " + this.name); 
} 
i 
person.sayHi () ;// 将 输出 Hi,My name is Jaki 


上 面 的 代码 中 this 指 的 就 是 person 对 象 本 身 ， 其 实 上 面 代码 和 下 面 代码 的 功能 完全 一 致 : 
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var Person = { 
name:"Jaki", 
sayHi:function(){ 
console.log("Hi,My name is " + person.name); 
' 
] 7 
你 可 能 会 问 ， 那 我 们 直接 使 用 person 不 就 好 了 ? 为 什么 非 要 使 用 this 呢 ? 针对 上 面 的 情况 ， 
的 确 如 此 , 我 们 没有 必要 使 用 this 关键 字 。 等 到 后 面 我 们 更 加 深入 地 学 习 了 面向 对 象 编程 ,尤其 是 
动态 生成 对 象 的 方法 后 ， 你 就 能 真正 体会 到 this 关键 字 的 强大 之 处 了 , 现在 让 我 们 循序 渐进 ， 拭 目 
以 待 ! 


3.2_ JavaScript 中 常用 的 内 置 对 象 


在 JavaScript 中 有 5 种 原始 类 型 (Undefined、Null、Boolean、Number、String)， 针 对 Boolean、 
Number 和 String 原始 类 型 ， 在 JavaScript 中 还 有 其 对 象形 式 的 包装 ， 并 且 在 必要 时 ，JavaScript 会 
自动 地 在 原始 值 和 对 象 之 间 转 换 。 由 于 这 些 内 置 对 象 的 存在 , 我 们 可 以 方便 地 对 数值 、 字 符 串 等 数 
据 进 行 操作 和 处 理 。 所 谓 内 置 对 象 ， 是 针对 自 建 对 象 而 言 的 ， 在 3.1 节 中 我 们 创建 的 “教师 ”对 象 
就 是 自 建 对 象 。 内 置 对 象 则 是 JavaScript 中 预先 定义 为 开发 者 提供 的 对 象 ， 开 发 者 可 以 直接 使 用 。 


3.2.1 JavaScript 中 的 Number 对 象 


JavaScript 中 的 Number 对 象 是 对 原始 类 型 Number 的 包装 。 可 以 使 用 Number 构造 函数 来 进行 
实例 创建 ， 其 中 需要 传 入 被 创建 对 象 的 数字 值 。 示 例如 下 : 
Var numl = new Number (5); 


console.1og (num1);// 将 打印 [Number: 5] 
console.1log (typeof numl);// 将 打印 object 


如 果 传 入 Number 方法 中 的 参数 无 法 转换 成 数字 ， 则 会 返回 NaN。 

在 JavaScript 中 ， 构 造 函数 也 是 一 种 对 象 。 实 际 上 ，Number 函数 本 身 也 是 一 个 对 象 ( 我 们 先 
将 其 称 为 Number 函数 对 象 )， 只 是 它 的 作用 是 生成 其 他 对 象 (姑且 把 它 生 成 的 对 象 都 叫做 Number 
实例 对 象 ) ，JavaScript 通过 new 关键 字 生成 对 象 的 原理 这 里 先 不 做 过 多 介绍 ， 后 面 会 专门 讨论 
JavaScript 中 的 原型 机 制 。 现 在 ， 你 只 需要 区 别 开 Number 函数 对 象 与 Number 实例 对 象 即 可 。 在 
Number 函数 对 象 中 定义 了 许多 有 意义 的 常量 属性 ， 示 例如 下 : 

// 可 以 表示 的 两 个 数值 之 间 的 最 小 间隔 

console.1og (Number .EPSILON) ;//2.220446049250313e-16 

//JavaSscript 中 最 大 的 安全 整数 

console.1og (Number .MAX SAFE INTEGER);//9007199254740991 

// 能 表示 的 最 大 数 
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console.log (Number .MAX VALUE) ;//1.7976931348623157e+308 
// 能 表示 的 最 接近 0 的 数 
console.1log (Number .MIN VALUE);//5e-324 

// 非 数字 值 

console.1og(Number.NaN) ;//NaN 

// 负 无 穷 大 

console.1og (Number .NEGATIVE _ INFINITY) ;//-Infinity 

允 正 无 穷 大 
console.1og(Number.POSITIVE_INFINITY) ;//Infinity 


正 负 无 穷 值 当 产 生 溢出 行为 时 会 被 返回 。Number 函数 对 象 中 也 定义 了 一 些 常用 的 方法 ， 示 例 
如 下 : 


// 判 断 传 入 的 参数 是 否 是 NaN 

console.1log (Number.isNaN (1)); 

// 判 断 是 否 是 有 限 数字 

console.log (Number.isFinite(1)); 

// 判 断 是 否 为 整数 ， 字 符 串 将 输出 为 false 
console.log (Number.isInteger ("1")); 

// 判 断 是 否 为 安全 的 整数 
console.1og(Number.isSafeInteger (1)) 7? 
// 将 字符 串 转换 为 浮 点 值 

console.1log (Number.parseFloat ("1.23")); 
// 将 字符 串 转换 为 整数 值 

console.log (Number.parseInt ("123.12")); 





上 面 的 属性 和 方法 都 是 Number 函数 对 象 定义 的 , Number 实例 对 象 中 也 有 一 些 预 定义 的 方法 ， 
所 有 的 Number 实例 对 象 共享 这 些 方 法 ， 示 例如 下 : 


Var num2 = new Number (123); 

// 将 数字 转换 成 科学 计数 法 传 入 的 参数 为 保留 小 数 的 位 数 
console.1og (num2 .toExponential (2));//1.23e+2 

// 将 数字 转换 成 字符 串 传 入 的 参数 为 保留 小 数 的 位 数 

console.log (num2 .toFixed(2));//123.00 

// 将 数字 转换 为 指定 有 效 数 字 长 度 的 数字 传 入 的 参数 为 有 效 数 字 的 位 数 
console.1log (num2 .toPrecision(2) ) ;//1.2+e2 

// 将 数字 转换 成 字符 串 传 入 的 参数 设置 进 制 

console.log (num2.toString (10));//123 

// 返 回 Number 实例 对 象 的 原始 值 


console.log (num2 .valueof ()); 





在 使 用 toString() 函 数 将 数值 对 象 转换 为 字符 串 时 ， 可 以 传 入 参数 来 设置 要 转换 成 的 进 制 。 


这 个 进 制 参数 可 以 设置 为 2~ 36 的 一 个 整数 ， 这 个 范围 很 好 理解 ， 数 字 0~ 9 加 上 26 个 英 
文字 母 ， 最 多 可 以 表达 36 个 数字 ， 因 此 最 大 可 以 描述 到 三 十 六 进 制 。 
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需要 注意 ,， 如果 使 用 字面 量 创 建 了 一 个 原始 数值 , 实际 上 也 可 以 调用 上 面 Number 实例 对 象 的 
方法 ， 我 们 讲 过 ，JavaScript 会 在 必要 的 时 候 进 行 原始 值 与 对 象 的 转换 ， 示 例如 下 : 

var num3 = 100; 

console.log (typeof num3);//number 

Var str = num3.toString(); 

console.log (typeof str);//string 

console.log (typeof num3);//number 

注意 ，num3 在 调用 toString0 方 法 的 时 候 ，JavaScript 把 其 当 作对 象 来 处 理 ， 但 是 并 没有 真正 
将 其 转换 成 Number 实例 对 象 。JavaScript 的 这 种 弱 类 型 的 设计 风格 使 我 们 在 编写 代码 时 十 分 畅快 。 


使 用 new 关键 字 在 构造 对 象 时 实际 上 执行 了 3 个 操作 , 首先 创建 一 个 空 的 对 象 建立 原型 链 ， 
之 后 执行 构造 函数 ,将 函数 中 的 this 关键 字 与 新 建 的 对 象 进 行 绑 定 ,最 后 将 这 个 新 建 的 对 象 
返回 。 因 此 ，new 关键 字 最 大 的 作用 不 仅仅 是 创建 出 一 个 新 的 对 象 ， 而 是 原型 链 的 建立 。 在 
很 多 场景 中 ， 你 可 能 会 见 到 直接 使 用 Number 函数 来 创建 数值 ， 并 不 使 用 new 关键 字 。 需 


要 注意 , 这 种 方式 创建 的 是 原始 数值 ， 并 不 是 Number 实例 对 象 ， 通 常 我 们 可 以 使 用 这 种 方 
式 来 完成 其 他 类 型 到 数值 类 型 的 强 转 ， 示 例如 下 : 


Var num4 = Number(5); 





console.1log (typeof num4);//number 


做 一 点 点 小 扩展 ， 严 格 地 讲 ，JavaScript 中 是 没有 “类 ”这 样 一 个 概念 的 ， 这 与 许多 面向 对 象 
语言 不 同 。 以 Swift 语言 为 例 ， 对 象 的 创建 都 是 基于 类 的 ， 我 们 会 将 一 些 所 有 对 象 共享 的 数据 定义 
为 静态 属性 或 静态 方法 , 每 个 对 象 独 有 的 数据 定义 为 成 员 属性 或 成 员 方法 ,并 且 类 可 以 通过 继承 来 
派生 出 子 类 。 在 JavaScript 中 ， 我 们 也 可 以 将 有 构造 函数 性 质 的 函数 对 象 理解 为 “类 ”， 这 个 函数 
对 象 包含 的 属性 和 方法 就 类 似 于 Swift 语言 中 类 的 静态 属性 和 静态 方法 ， 这 个 函数 构造 出 来 的 对 象 
的 属性 方法 就 类 似 于 Swift 语言 中 类 的 成 员 属性 和 成 员 方法 ， 并 且 通 过 原型 链 JavaScript 中 也 可 以 
实现 “类 ”的 继承 ， 后 面 我 们 会 做 深入 介绍 。 





3.2.2 JavaScript 中 的 String 对 象 


String 对 象 是 对 字符 串 的 一 种 包装 。 在 JavaScript 中 可 以 使 用 双 引 号 或 者 单 引 号 来 创建 字符 串 
原始 值 ， 同 样 可 以 使 用 String() 构 造 函 数 来 创建 字符 串 对 象 ， 示 例如 下 : 

Var strl = new String("Hello World"); 

console.log(str1);//[String: "Hello World'] 

也 可 以 不 使 用 new 关键 字 直 接 使 用 String() 函 数 ， 只 是 这 样 的 话 实际 上 是 创建 了 一 个 原始 类 型 
的 String 字符 串 ， 并 不 是 对 象 ， 这 种 方法 常常 用 来 进行 字符 串 转换 。 在 实际 开发 中 ， 对 字符 串 的 操 
作 将 十 分 频繁 ， 举 例 来 说 ， 进 行 URL 协议 解析 时 ， 你 可 能 需要 截取 出 URL 中 定义 的 参数 。 在 界面 
数据 的 填充 时 ， 你 可 能 需要 对 字符 串 进行 拼接 、 插 入 或 替换 等 操作 。JavaScript 中 的 String 对 象 中 
封装 了 许多 属性 和 方法 ， 可 以 帮助 开发 者 便捷 地 对 字符 串 进 行 操作 。 
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任何 String 实例 对 象 中 都 包含 一 个 length 属性 ， 通 过 length 属性 可 以 获取 到 字符 串 长 度 ， 即 
字符 个 数 ， 示 例如 下 : 

Var strl = new String("Hello World"); 

console.log(strl.length);//11 

JavaScript 最 初 的 设计 是 用 于 编写 浏览 器 脚本 ， 因 此 其 String 实例 对 象 中 内 置 了 许多 对 HTML 
标签 操作 的 方法 ， 这 不 是 本 书 的 重点 ， 这 里 我 们 就 不 再 进行 深入 讨论 ， 你 只 需要 掌握 字符 串 操作 相 
关 的 方法 即 可 ， 示 例如 下 : 

Var strl = new String("Hello World"); 

// 返 回 特定 位 置 的 字符 ， 下 标 从 0 开始 

console.log(strl.charAt (0));//H 

// 返 回 特定 位 置 的 字符 编码 值 

console.log(strl.charCodeAt (0));//72 

// 在 字符 串 后 进行 拼接 ， 将 拼接 后 的 字符 串 返回 

console.1og(strl.concat ("!"));//Hello World! 

// 获 取 某 个 字符 在 字符 串 中 的 索引 ， 从 前 往 后 找 ， 如 果 没有 找到 将 返回 -1 

console.log(strl.indexOf ('1'));//2 

// 获 取 某 个 字符 在 字符 串 中 的 索引 ， 从 后 往 前 找 ， 如 果 没 有 找到 将 返回 -1 

console.log(strl.lastIndexOf ('1'));//9 

// 进 行 字符 串 的 比较 ， 原 字符 串 小 于 参数 字符 串 则 返回 小 于 0 的 数 ， 大 于 则 返回 大 于 0 的 数 ， 相 等 则 
返回 0 

console.log(strl.localeCompare ("Aello World"));//1 

// 使 用 正则 表达 式 对 字符 串 进行 匹配 ， 匹 配 结果 将 返回 一 个 对 象 

console.log(strl.match(/He/));//[ 'He'，index: 0, input: 'Hello World' ] 

// 使 用 正则 表达 式 来 匹配 字符 串 ， 将 匹配 到 的 字符 串 进行 替换 

console.log(strl.replace(/He/, "AI"));//AIllo World 

// 使 用 正则 表达 式 来 查找 某 个 子 串 的 位 置 ， 如 果 没 有 找到 ， 则 返回 -1 

console.log(strl.search(/He/));//0 

// 截 取 范 围 内 的 子 字符 串 

console.log(strl.slice(0,3));//Hel 

// 分 隔 字 符 串 ， 返 回 数组 ， 其 中 第 1 个 参数 为 进行 分 割 的 字符 ， 第 2 个 参数 为 返回 最 多 子 串 个 数 

console log(atrl.split("l" L100 /lL “Her 9 Wo WO “Ad” 1 

// 进 行 字符 串 的 截取 ， 第 1 个 参数 为 开始 截取 的 位 置 ， 第 2 个 参数 为 截取 的 长 度 

console.log(strl.substr(0,2));//He 

// 截 取 下 标 间 的 子 串 

console.log(strl.substring(1,2));//e 

// 将 字符 串 转 为 小 写 

console.log(strl.toLocaleLowerCase());//hello world 

console.log(strl.toLowerCase());//hello world 

// 将 字符 串 转换 为 大 写 

console.log(strl.toLocaleUpperCase());//HELLO WORLD 

console.log(strl .toUpperCase());//HELLO WORLD 

// 去 掉 字符 串 开头 和 结尾 的 空格 


console.log(str]l .trim()); 
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// 从 字符 串 左 侧 去 掉 空格 

console.log(strl.trimLeft ()); 

// 从 字符 串 右 侧 去 掉 空格 

console.1og(strl.trimRight() ) 7 

// 获 取 字 符 串 对 象 的 原始 值 

console.log(strl.valueOf ()); 

注意 ， 上 面 的 所 有 方法 并 没有 修改 原 字 符 串 对 象 ， 而 是 将 结果 以 字符 串 原始 值 的 形式 进行 返 
习 。 和 大 多 数 编程 语言 一 样 ,JavaScript 中 字符 串 的 下 标 也 是 从 0 开始 .在 上 面 的 示例 代码 中 , match、 
replace 和 search 方法 都 是 通过 正则 表达 式 来 进行 子 串 的 匹配 , 正则 表达 式 用 来 描述 一 种 匹配 规则 ， 
后 面 我 们 会 详细 介绍 。 JavaScript 也 会 在 必要 的 时 候 自动 对 String 原始 类 型 与 String 对 象 进行 转换 ， 
这 对 开发 者 来 说 是 透明 的 , 你 也 可 以 直接 使 用 原始 字符 串 调用 字符 串 对 象 的 属性 和 方法 ,示例 如 下 : 


console.log("Hello".length);//5 























于 字符 串 截取 方法 slice， 如 果 传 入 的 参数 为 负数 ， 使 用 字符 串 长 度 减 去 这 个 负数 的 绝对 


Pt 示例 如 下 : 


console.log("Hello World".slice(-4,-1));//orl 





3.2.3 ”JavaScript 中 的 Boolean 对 象 


Boolean 对 象 是 对 布尔 类 型 的 原始 值 的 一 种 包装 , 同样 使 用 new 关键 字 加 构造 函数 的 方法 来 创 
建 ， 示 例如 下 : 


Var bool = new Boolean(true); 
console.1og(bool);//[Boolean: true] 


Boolean 构造 函数 中 所 传 的 参数 不 一 定 必须 是 原始 布尔 类 型 的 值 。 注意 , 如 果 传 入 的 参数 为 0、 
-0、null、false、NaN 、undefined 或 者 空 字符 串 ""， 则 生成 的 Boolean 对 象 的 原始 值 为 false， 其 他 
传 入 任何 值 ， 都 将 生成 一 个 原始 值 为 true 的 Boolean 实例 对 象 。 示 例如 下 : 

// 以 下 都 将 生成 原始 值 为 false 的 Boolean 对 象 


console.log(new Boolean(0)); 
console.log (new Boolean(-0)); 
console.log (new Boolean (NaN)); 
console.log (new Boolean (undefined)); 
console.log (new Boolean("")); 
console.log (new Boolean (false)); 
console.log (new Boolean (null)); 

// 下 面 这 些 生 成 的 是 原始 值 为 true 的 Boolean 对 象 
console.log (new Boolean("false")); 
console.log (new Boolean({})); 
console.log (new Boolean(Infinity)); 
console.log (new Boolean (new Boolean (false))); 
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在 使 用 Boolean 实例 对 象 时 ， 有 一 点 需要 切记 ! 对 于 JavaScript 中 的 让 条 件 语句 ， 其 判断 条 件 
如 果 是 一 个 对 象 则 会 被 自动 转换 为 tue， 因 此 无 论 Boolean 实例 对 象 的 原始 值 是 true 还 是 false, 在 
让 条 件 判 断 中 都 将 被 作为 true 来 处 理 。 例 如 : 
Var bf = new Boolean(false) 7 
DEY 
console.1og ("执行 了 "); 
} 
上 面 的 示例 依然 会 执行 if 结构 中 的 打印 代码 。 因 此 ， 要 在 判断 条 件 中 使 用 Boolean 对 象 ， 需 
要 取 其 原始 值 再 进行 使 用 ， 例 如 : 
Var bf = new Boolean(false) 7 
if (bf.valueOof()) { 
console.1og ("执行 了 ")，; 
} 


如 果 你 只 是 想 将 某 个 其 他 类 型 的 值 转换 为 布尔 类 型 ， 直 接 使 用 Boolean() 函 数 即 可 ， 转 换 的 规 
则 和 前 面 所 讲 的 一 致 ，0、-0、null、false、NaN、undefined 或 者 空 字 符 串 "将 转换 为 布尔 值 false， 
其 他 都 将 转换 为 布尔 值 true。 


3.2.4 JavaScript 中 的 Array 对 象 


数组 是 一 种 非常 常用 的 数据 结构 。 在 JavaScript 中 ， 数 组 也 是 一 种 对 象 ， 只 是 它 是 列表 形式 的 
对 象 。 简 单 理解 ， 数 组 就 是 一 种 有 序列 表 ， 例 如 我 们 创建 一 个 学 生 名 单列 表 ， 示 例如 下 : 

var stus = ["Tom", "Jaki", "Lucy", "Ami"]; 

console.log (typeof stus);//object 

上 面 的 代码 使 用 中 括号 进行 数组 的 创建 ， 这 是 一 种 便捷 创建 数组 的 方法 ， 当 然 我 们 也 可 以 使 
用 Array 构造 方法 来 创建 数组 对 象 ， 这 两 种 方式 创建 出 来 的 数组 对 象 实质 上 是 一 样 的 ， 例 如 : 

Var array = new Array ("Tom","Jaki","Lucy", "Ami"); 

console.log (typeof array);//object 

数组 中 的 元 素 类 型 并 非 要 保持 一 致 ， 它 们 可 以 是 任意 类 型 的 组 合 。 注 意 ， 数 组 中 的 元 素 是 有 
序 的 ， 可 以 通过 下 标的 方式 对 它们 进行 访问 ， 数 组 的 下 标 是 从 0 开始 的 ， 示 例如 下 : 

// 访 问 数组 中 的 第 1 个 元 素 

console.log(array[0]);//Tom 

再 回 过 头 来 看 数组 对 象 的 构造 方法 Array0， 这 个 方法 中 如 果 只 传 入 一 个 参数 且 为 数值 类 型 ， 
则 会 返回 一 个 固定 长 度 的 空 数组 对 象 , 传 入 多 个 参数 或 非 数 值 类 型 的 参数 , 则 会 创建 数组 并 将 参数 
作为 数组 中 的 元 素 。 
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虽然 你 也 可 以 将 数组 理解 为 类 似 {0:"Tom"，1:"Jaki"} 这 样 的 对 象 ， 但 是 需要 注意 ， 访 问 数组 中 
的 元 素 并 不 能 使 用 点 语法 ， 这 样 的 写法 将 报错 “array.0”。 原因 是 对 象 的 属性 名 称 如 果 是 以 数 


字 开 头 ， 则 其 为 非法 的 属性 名 ， 不 能 和 点 语法 结合 使 用 ， 只 能 够 通过 中 括号 的 形式 访问 。 如 
果 创 建 一 个 自 定 义 的 对 象 ， 为 其 添加 一 个 以 数字 开头 的 属性 ， 你 依然 无 法 使 用 点 语句 进行 访 
间 。 你 可 能 还 会 有 一 个 疑问 ， 中 括号 进行 对 象 属性 的 访问 时 ， 属 性 名 不 是 必须 是 字符 串 格式 
么 ?确实 如 此 ， 只 是 如 果 我 们 传 入 的 是 数值 ，JavaScript 会 自动 帮 我 们 进行 处 理 。 





要 判断 某 一 个 值 是 否 为 数组 类 型 ， 可 以 使 用 Array 函数 对 象 的 isArray0 方 法 , 如 果 传 入 的 参数 
是 数组 对 象 ， 则 会 返回 true， 否 则 将 返回 false， 示 例如 下 : 


// 判 断 某 个 值 是 否 为 数组 


console.log (Array.isArray (array));//true 
数组 实例 对 象 中 也 封装 了 许多 属性 与 方法 ， 其 中 length 属性 可 以 获取 到 数组 中 元 素 的 个 数 : 


Var array = new Array("Tom", "Jaki", "Lucy", "Ami"); 














console.log(array.length);//4 


需要 注意 ， 数 组 实例 对 象 的 length 属性 可 以 进行 任意 修改 ， 如 果 将 其 修改 为 小 于 数组 中 原本 
元 素 个 数 的 值 ,溢出 的 元 素 将 会 被 清 掉 ,因此 在 修改 数组 实例 对 象 的 length 属性 时 要 格外 注意 ， 示 
例如 下 : 


Var array = new Array("Tom", "Jaki", "Lucy", "Ami"); 
console.log(array.length);//4 

array.length = 2; 

console.log(array);//[ 'Tom', ‘'Jaki' ] 


数组 实例 中 封装 的 方法 可 以 分 为 两 类 ， 一 类 是 会 修改 原 数组 对 象 的 ， 另 一 类 是 不 会 修改 原 数 
组 对 象 的 ， 会 将 操作 结果 以 新 的 数组 对 象 返 回 。 下 面 这 些 方法 都 会 对 原 数 组 对 象 进 行 修改 : 


Var array = [0,1,2,3,4,5,6,7,8,9]; 

// 删 除数 组 最 后 一 个 元 素 

array.pop(); 

console. loglarrayhs//[L Oy lr 27 37 Ar Sr LO Tr BT 

// 在 数组 的 末尾 添加 元 素 

array.push (9,10); 

console.log(array);//[ 0, 1, 2, 3, 4, 5, 6€, 7, 8, 9, 10 ] 
// 倒 置 数组 

array.reverse(); 

console.log(array);//[ 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0] 
// 删 除数 组 中 的 第 1 个 元 素 

array.shift(); 

CONnsole, log(array)r//L 9 Br Ta Or Sy Ar SA 27 .17 .0 

// 对 数组 进行 排序 


array.sort (function(a,b){ 
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if (a>b) { 
return 1; 
}else if(a<b){ 
return -1; 
}else{ 
return 0; 
} 
1D); 
Console.log(array);//[ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9] 
// 进 行 数组 元 素 替 换 ， 第 1 个 参数 为 从 哪个 下 标 可 以 替换 ， 第 2 个 参数 为 要 删除 的 元 素 个 数 ， 
// 之 后 为 要 替换 成 的 元 素 
array.splice(6,4,"100","end"); 
Console. log(array)r//Al Or Tr 2797 Md, Sr YLOO "ond ] 
// 在 数组 开头 进行 元 素 的 追加 
array.unshift (0,0); 
console. log(array)y /l/l O07 OF Or Le Zr 37 .47 S57 100 “end" 


在 上 面 列 出 的 方法 中 ,除了 sort0 排 序 方法 ,其 他 都 很 好 理解 。 数 组 实例 对 象 的 sort0 排 序 方法 


需要 我 们 传 入 一 个 排序 函数 function(a,b)， 这 个 函数 中 有 两 个 参数 ， 分 别 代 表 按 照 数组 中 的 先后 顺 
序 进行 比较 的 两 个 元 素 ， 如 果 排 序 函数 返回 小 于 0 的 值 ， 则 表示 a 元 素 会 排 在 b 元 素 之 前 ， 如 果 排 
序 函 数 返回 大 于 0 的 值 ， 则 表示 a 元 素 要 排 在 b 元 素 之 后 ， 如 果 排 序 函 数 返 回 0， 则 a 元素 和 b 元 
素 的 相对 位 置 不 变 。 


下 面 这 些 方法 不 会 修改 原 数组 实例 对 象 : 


var array = [0,1,2,3,4,5]; 

// 进 行 数组 元 素 追 加 

console.log(array.concat (6,7,8,9));//[ 0，1，2，3，4，5，6，7，8，9 ] 
// 将 所 有 元 素 以 传 入 的 参数 分 隔 进行 拼接 
console.log(array.join("."));//0.1.2.3.4.5 

// 截 取 子 数组 ， 第 1 个 参数 为 开始 截取 的 下 标 ， 第 2 个 参数 为 截取 到 的 下 标 (不 包含 此 位 置 ) 
console.log(array.slice(0,3));//[ 0, 1, 2] 

// 将 数组 元 素 拼接 成 字符 串 ， 以 逗号 分 隔 
console.log(array.toString());//0,1,2,3,4,5 

// 返 回 数 组 中 指定 元 素 的 下 标 ， 从 前 往 后 找 

console.log (array.indexOf (1));//1 

// 返 回 数 组 中 指定 元 素 的 下 标 ， 从 后 往 前 找 
console.log(array.lastIndexOf (1));//1 


需要 注意 ， 数 组 中 的 元 素 是 可 以 重复 的 。 
在 实际 开发 中 ， 对 数组 最 频繁 的 操作 便 是 进行 数组 的 遍历 。JavaScript 中 的 数组 实例 对 象 支持 


很 多 遍历 方法 ， 例 如 : 


Var stus = ["Tom","Jaki","Lucy", "Ami"]; 

// 进 行 数组 的 逐个 遍历 ， 需 要 传 入 一 个 函数 ， 

// 此 函数 有 3 个 参数 ， 分 别 为 遍历 到 的 元 素 、 其 下 标 和 原 数组 。 

// 还 可 以 传 入 第 2 个 参数 ， 这 个 参数 将 与 遍历 函数 中 使 用 的 this 关联 
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stus.forEach (function (element, index,array){ 
console.log (element, index,array); 
aostas)y 
// 对 数组 进行 检查 。 传 入 一 个 函数 ， 函 数 中 的 参数 分 别 为 遍历 到 的 元 素 、 
// 其 下 标 和 原 数组 。 此 函数 需要 返回 一 个 布尔 值 ， 如 果 返 回 ture， 则 继续 遍历 ， 
// 如 果 返 回 false 则 停止。 
// 当 所 有 元 素 都 遍历 完成 并 且 都 返回 true 时 ， 结 果 才 为 true， 否 则 都 为 false 
//every 方法 还 可 以 传 入 第 2 个 参数 ， 这 个 参数 将 与 遍历 函数 中 使 用 的 this 关联 
Var notHaveAmi = stus.every (function(element,index,array){ 
console.log (this); 
console.log(element, index,array); 


if (element == "Ami") { 
return false; 
}elsef 


return true; 
} 
},stus); 
console.log (notHaveAmi);//false 
//some 遍历 方法 与 every 对 应 ， 
// 只 是 其 回调 是 全 部 返回 false， 结 果 才 为 false， 否 则 为 true 
Var haveAmi = stus.some (function(element,index,array){ 
console.log (this); 
console.log (element, index,array); 
if (element == "Ami") { 
return true; 
}elset 
return false; 
} 
} vstus) 7 
console.log (haveAmi);//true 
// 数 组 过 滤器 。 当 回调 函数 返回 true 时 ， 代 表 此 元 素 通过 过 滤 ， 将 其 添加 进 新 数组 返回 
Var newArray = stus.filter(function(element,index,array){ 
console.log (this); 
console.log (element, index,array); 
if (element == "Ami") { 
return true; 
}else{ 
return false; 
} 
Jrstus)? 
console.log (newArray);//[ 'Ami' ] 
//map 方法 将 数组 中 的 每 一 个 元 素 执行 回调 ， 然 后 将 返回 值 重 新 组 成 数组 返回 
newArray = stus.map (function (element, index,array){ 
return elementt™ 1" 
yrstus)? 
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console.log (newArray);//[ 'Tom!', ‘'Jaki!', 'Lucy!', 'Ami!' ] 

//reduce 方法 是 数组 累加 器 ， 会 按照 数组 从 左 向 右 的 顺序 依次 调用 回调 函数 。 

// 回 调 函 数 中 有 3 个 参数 ， 第 1 个 参数 为 上 次 执行 累加 回调 的 返回 值 ， 

// 第 2 个 参数 为 当前 遍历 的 元 素 ， 第 3 个 参数 为 其 下 标 。 

//reduce 方法 的 第 2 个 参数 可 选 ， 为 首次 进行 累加 回调 的 初始 值 。 

// 如 果 不 提供 初始 值 , 

//reduce 函数 会 从 数组 索引 为 1 的 位 置 开始 ， 跳 过 第 1 个 元 素 

Var res = stus.reduce(function(acc,element,index){ 
return acc+" "+element; 

el 

console.log(res);//Hello Tom Jaki Lucy Ami 

// 与 reduce 方法 类 似 ， 其 从 右 向 左 开 始 遍 历 

res = stus.reduceRight (function (accvelement,index)1{ 
return acc+" "telement; 

ye"Hello")ys 

console.log(res);//Hello Ami Lucy Jaki Tom 


虽然 JavaScript 中 并 没有 严格 要 求 在 数组 的 遍历 过 程 中 不 能 对 数组 结构 进行 修改 , 但 是 建议 


在 遍历 的 过 程 中 不 要 增删 元 素 ， 如 果 在 遍历 过 程 中 向 数组 中 新 增 元 素 ， 则 新 的 元 素 不 会 被 
遍历 到 ， 如 果 进 行 了 元 素 的 删除 ， 则 会 造成 意料 之 外 的 结果 。 





上 面 列举 的 数组 实例 对 象 遍 历 方法 略微 复杂 ， 虽 然 有 详尽 的 注释 但 是 依然 强烈 建议 你 一 定 要 





自己 动手 练习 一 下 ， 实 践 出 真知 ， 熟 练 掌握 这 些 遍历 方法 ， 会 让 你 以 后 的 学 习 得 心 应 手 ! 


3.2.5 JavaScript 中 的 Date 对 象 


Date 对 象 是 JavaScript 中 用 来 处 理 日 期 与 时 间 的 ， 同 样 ， 使 用 Date 构造 方法 来 进行 Date 实例 


对 象 的 创建 ， 在 创建 Date 实例 对 象 时 有 4 种 传 参 方式 ， 示 例如 下 : 


// 以 当前 时 间 创 建 Date 对 象 

var date = new Date(); 
console.log(date);//2017-02-27T02:11:03.9452 
// 以 指定 时 间 戳 创建 Date 对 象 ， 时 间 惟 单位 为 毫秒 

date = new Date(1483888888999) 
console.log(date);//2017-01-08T15:21:28.9992z 
// 以 指定 的 字符 串 创建 Date 对 象 ， 字 符 串 必须 为 标准 格式 的 时 间 字 符 串 
date = new Date ("December 17, 2017 03:24:00") 7 
console.log(date) ;//2017-12-16T19:24:00.0002z 
// 设 置 年 、 月 、 日 、 时 、 分 、 秒 、 毫 秒 来 创建 Date 对 象 
date = new Date(2017,10,11,8,10,40,133); 
console.log(date);//2017-11-11T00:10:40.1332 


如 果 在 构造 函数 中 不 传 入 任何 参数 ， 则 默认 使 用 当前 日 期 时 间 创 建 Date 实例 对 象 。 如 果 传 入 


一 个 数值 类 型 的 参数 ， 则 会 将 此 数值 作为 时 间 戳 来 创建 Date 实例 对 象 ， 时 间 戳 的 单位 为 毫秒 ， 代 
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表 从 1970 年 1 月 1 日 起 经 过 的 毫秒 数 。 如 果 传 入 的 参数 是 一 个 字符 串 ， 则 会 以 此 字符 串 表 示 的 日 
期 时 间 创 建 Date 对 象 。 需 要 注意 ， 传 入 的 参数 字符 串 必须 为 标准 的 日 期 时 间 字 符 串 。 如 果 传 入 的 
参数 大 于 1 个 ， 则 会 按照 年 、 月 、 日 、 时 、 分 、 秒 、 毫 秒 的 顺序 进行 读 参 来 创建 Date 对 象 。 如 果 
传 入 的 参数 在 1 个 以 上 但 是 不 足 7 个 ， 则 未 传 入 的 参数 将 以 0 代 蔡 ,代表 月 数 的 整数 值 需 是 0 一 11 
的 一 个 数值 ，0 代表 1 月 。 

使 用 Date 构造 函数 对 象 的 now 方法 可 以 直接 获取 到 1970 年 1 月 1 日 至 当前 时 刻 的 时 间 戳 ， 
单位 为 毫秒 ， 示 例如 下 : 

// 返 回 从 1970 年 1 月 1 日 起 至 现在 经 过 的 毫秒 数 

console.log (Date.now());//1488162786627 

Date 构造 函数 对 象 的 parse 方法 用 于 解析 一 个 日 期 时 间 字 符 串 ， 将 返回 1970 年 1 月 1 日 至 指 
定 日 期 时 间 的 时 间 戳 ， 单 位 为 毫秒 ， 示 例如 下 : 

// 解 析 一 个 日 期 时 间 字 符 串 

console.1og(Date.parse("December 17，2017 03:24:00"));//1513452240000 

Date 构造 函数 对 象 的 UTC 方法 用 于 将 指定 的 日 期 时 间 转 换 为 时 间 戳 ， 其 参数 规则 与 Date() 构 
造 函数 中 最 长 参数 的 形式 一 致 ， 最 多 可 以 接收 7 个 参数 ， 示 例如 下 : 

// 指 定 日 期 时 间 ， 返 回 时 间 戳 

console.log (Date.UTC(2017,0,1,10,30,30,120));//1483266630120 


你 也 可 以 使 用 Date 实例 对 象 中 封装 的 一 些 方法 来 直接 获取 想 要 的 信息 ， 示 例如 下 : 








var date = new Date(); 

// 根 据 本 地 时 间 获 取 日 期 对 象 是 当前 月 的 第 几 天 
console.log (date.getDate()); 

// 根 据 本 地 时 间 获 取 星 期 。 从 0 开始 ，0 表示 周 日 
console.log(date.getDay()); 

// 根 据 本 地 时 间 获 取 日 期 对 象 当前 的 年 份 
console.log(date.getFullYear ()); 

// 根 据 本 地 时 间 获 取 日 期 对 象 当前 的 小 时 ，0 一 23 
console.log (date.getHours()); 

// 根 据 本 地 时 间 获 取 日 期 对 象 当前 的 分 钟 
console.log (date.getMinutes () ) 7 

// 根 据 本 地 时 间 获 取 日 期 对 象 当前 的 秒 数 
console.log(date.getSeconds () ) 

// 根 据 本 地 时 间 获 取 日 期 对 象 当前 的 毫秒 数 
console.log(date.getMilliseconds ()); 
// 根 据 本 地 时 间 获 取 日 期 对 象 当前 的 月 份 。 从 0 开始 ，0 表示 1 月 
console.log (date.getMonth()); 

// 返 回 时 间 戳 ， 单 位 毫秒 
console.log(date.getTime ()) 7 

// 获 取 当 前 时 区 的 时 区 偏 移 
console.log(date.getTimezoneOffset () ) 


// 根 据 通用 时 间 获 取 当 前 日 期 对 象 是 当前 月 的 第 几 天 
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console.log(date.getUTCDate()); 

// 根 据 通用 时 间 获 取 当 前 日 期 对 象 的 星期 数 ，0 表示 周 日 
console.log(date.getUTCDay ()); 

// 根 据 通用 时 间 获 取 日 期 对 象 当前 的 年 份 
console.log(date.getUTCFullYear ()); 

// 根 据 通用 时 间 获 取 日 期 对 象 当前 的 小 时 
console.log(date.getUTCHours () ) ; 

// 根 据 通用 时 间 获 取 日 期 对 象 当前 的 分 钟 
console.1log(date.getUTCMinutes ()) 7 

// 根 据 通用 时 间 获 取 日 期 对 象 当前 的 秒 数 
console.log(date.getUTCSeconds () ) ? 

// 根 据 通用 时 间 获 取 日 期 对 象 当前 的 毫秒 数 
console.log(date.getUTCMilliseconds ())7 
// 根 据 通用 时 间 获 取 日 期 对 象 当前 的 月 份 ， 从 0 开始 ，0 表示 1 月 
console.log(date.getUTCMonth () ) 7 





UTC 是 协调 世界 时 的 简称 ， 又 称 为 世界 统一 时 间或 世界 标准 时 间 ， 被 应 用 于 许多 互联 网 标 
准 中 。 





下 面 这 些 方法 用 来 修改 Date 实例 对 象 : 

Var date = new Date(); 

// 根 据 本 地 时 间 为 日 期 对 象 设置 月 份 中 的 第 几 天 
date.setDate (10); 

// 根 据 本 地 时 间 为 日 期 对 象 设置 年 份 
date.setFullYear (1999) 

// 根 据 本 地 时 间 为 日 期 对 象 设置 小 时 
date.setHours (11) 7 

// 根 据 本 地 时 间 为 日 期 对 象 设置 毫秒 数 
date.setMilliseconds (123); 

// 根 据 本 地 时 间 为 日 期 对 象 设置 分 钟 数 
date.setMinutes (30) 7 

// 根 据 本 地 时 间 为 日 期 对 象 设置 月 份 
date.setMonth (1) 

// 根 据 本 地 时 间 为 日 期 对 象 设置 秒 数 
date.setSeconds (30) 7 

// 根 据 时 间 戳 来 设置 日 期 对 象 的 时 间 ， 如 果 早 于 1970 年 1 月 1 日 ， 可 以 设置 为 负 值 
date.setTime (1488167242644) 7 

// 根 据 通用 时 间 为 日 期 对 象 设置 月 份 中 的 第 几 天 
date.setUTCDate (10) 7 

// 根 据 通用 时 间 为 日 期 对 象 设置 年 份 
date.setUTCFullYear (1970) 7 

// 根 据 通用 时 间 为 日 期 对 象 设置 毫秒 数 
date.setUTCMilliseconds (123) 7 
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// 根 据 通用 时 间 为 日 期 对 象 设置 分 钟 数 
date.setUTCMinutes (30); 

// 根 据 通用 时 间 为 日 期 对 象 设置 月 份 
date .setUTCMonth (1) 

// 根 据 通用 时 间 为 日 期 对 象 设置 秒 数 
date.setUTCSeconds (30) 7 


下 面 的 这 些 方法 用 于 对 Date 实例 对 象 进行 格式 化 : 


var date = new Date() 7 

// 以 一 种 易 读 的 方式 返回 日 期 

console.1log(date.toDateString());//Mon Feb 27 2017 星期 月 日 年 
// 返 回 符合 TSo 标准 的 日 期 字符 串 
console.1log(date.toISOString())?//2017-02-27T05:13:25.0252 

// 使 用 toTSostring () 返回 一 个 表示 该 日 期 的 字符 串 

console.log (date.toJSON());//2017-02-27T05:14:11.4142 

// 返 回 一 个 表示 该 日 期 对 象 日 期 部 分 的 字符 串 ， 该 字符 串 格式 与 系统 设置 的 地 区 关联 
console.log (date.toLocaleDateString());//2/27/2017 

// 返 回 一 个 表示 该 日 期 对 象 的 字符 串 ， 该 字符 串 与 系统 设置 的 地 区 关联 
console.log(date.toLocaleString());//2/27/2017, 1:16:27 PM 

// 返 回 一 个 表示 该 日 期 对 象 时 间 部 分 的 字符 串 ， 该 字符 串 格式 与 系统 设置 的 地 区 关联 
console.log(date.toLocaleTimeString());//1:17:00 PM 

// 返 回 一 个 表示 该 日 期 对 象 的 字符 串 

console.log(date.toString());//Mon Feb 27 2017 13:17:48 GMT+0800 
// 以 人 类 易 读 格式 返回 日 期 对 象 时 间 部 分 的 字符 串 
console.log(date.toTimeString());//13:18:19 GMT+0800 (CST) 
// 把 一 个 日 期 对 象 转换 为 一 个 以 UTC 时 区 计时 的 字符 串 
console.log(date.toUTCString());//Mon, 27 Feb 2017 05:18:43 GMT 





(CST) 


// 从 1970 年 1 月 1 日 0 时 0 分 0 秒 (UTC, 协调 世界 时 ) 到 该 日 期 的 毫秒 数 ， 与 getTime () 方 法 一 臻 


console.log (date.valueOf ()); 


注意 , 如 果 在 设置 Date 实例 对 象 的 年 份 时 使 用 了 两 位 数 , 则 将 默认 表示 为 1900 一 1999 年 之 间 


的 年 份 ， 例 如 : 


var date = new Date(90,9,22); 
console.log (date);//1990-10-21T16:00:00.0002z 


为 了 避免 不 必要 的 歧义 ， 最 好 不 要 使 用 两 位 数 来 设置 Date 实例 对 象 的 年 份 。 


3.2.6 JavaScript 中 的 Math 对 象 





在 编程 过 程 中 ， 数 学 运算 是 其 中 十 分 重要 的 角色 ， 毕 竞 计 算 机 学 科 的 基础 是 基于 


F 数 学 的 。 在 


各 种 编程 语言 中 也 都 提供 了 数学 函数 库 供 开发 者 使 用 ， 在 JavaScript 中 ，Math 是 一 个 内 置 对 象 而 
并 非 函 数 对 象 。 这 和 我 们 之 前 学 习 的 内 置 对 象 有 些 不 同 ， 也 很 容易 理解 ，Math 对 象 的 作用 是 提供 


便利 的 数学 方法 ， 我 们 并 不 需要 创建 出 实例 对 象 。 
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在 开发 中 可 能 经 常会 用 到 一 些 数 学 常量 ， 例 如 圆周 率 、 自 然 对 数 等 。Math 对 象 中 包装 了 一 些 
属性 可 以 直接 获取 到 这 些 常量 ， 示 例如 下 : 


// 数 学 常量 

// 自 然 常 数 

console.log (Math.E);//2.718281828459045 

//2 的 自然 对 数 

console.log (Math.LN2);//0.6931471805599453 
//10 的 自然 对 数 

console.log (Math.LN10);//2.302585092994046 
// 以 2 为 底 E 的 对 数 

console.log (Math.LOG2E) ;//1.4426950408889634 
// 以 10 为 底 E 的 对 数 

console.log (Math.LOG10E) ;//0.4342944819032518 
// 圆 周 率 

console.log (Math.PI);//3.141592653589793 
//1/2 的 平方 根 

console.log (Math.SQORT1 2);//0.7071067811865476 
//2 的 平方 根 

console.log (Math.SQRT2) ;//1.4142135623730951 


也 可 以 使 用 Math 对 象 中 提供 的 方法 来 进行 数学 运算 ， 常 用 方法 列举 如 下 : 


// 数 学 方法 

// 求 绝对 值 

console.log (Math.abs (-4));//4 

// 求 反 余弦 值 

console.log (Math.acos (0.5));//1.0471975511965976 
// 求 反正 弦 值 

console.log (Math.asin(0.5));//0.5235987755982988 
// 求 反正 切 值 

console.log (Math.atan(0.5));//0.46364760900080615 
// 需 要 传 入 两 个 参数 x、y， 求 x/y 的 反正 切 值 

console.log (Math.atan2(1,2));//0.4636476090008061 
// 进 行 向 上 取 整 

console.log (Math.ceil(1.1));//2 

// 求 余弦 值 

console.log (Math.cos (0.5));//0.8775825618903728 
// 传 入 参数 n 求 自然 对 数 E 的 n 次 方 

console.1og (Math.exp (2));//7.3890560989306495 
// 向 下 取 整 

console.1log (Math.floor (2.9));//2 

// 传 入 参数 n， 求 以 自然 常数 EE 为 底 n 的 对 数 

console.log (Math.1o0g(10));//2.302585092994046 
// 求 一 组 数 中 的 最 大 值 

console.log (Math.max(1,2,5,3,7));//7 
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// 求 一 组 数 中 的 最 小 值 

console.log (Math.min(1,2,5,3,7));//1 
// 传 入 两 个 参数 x、y， 求 x 的 y 次 方 
console.log (Math.pow(2,3));//8 

// 返 回 一 个 0 一 1 的 随机 数 

console.log (Math.random()); 

// 进 行 四 合 五 入 

console.log (Math.round(3.4));//3 
// 求 正弦 值 

console.log (Math.sin(0.5)); 
// 求 平方 根 

console.log (Math.sqrt (2));//1.4142135623730951 
// 求 正切 值 

console.log (Math.tan(1)); 


需要 注意 ， 上 面 所 列举 的 三 角 函 数 方法 的 返回 值 都 是 以 弧度 为 单位 的 。 





3.2.7 ”JavaScript 中 的 RegExp 对 象 


关于 正则 表达 式 ， 我 们 前 边 在 介绍 String 对 象 时 已 经 提 到 ， 正 则 表达 式 用 来 定义 一 种 规则 ， 
通过 规则 来 对 文本 进行 匹配 。 在 JavaScript 中 ， 正 则 表达 式 也 是 一 种 对 象 ， 其 可 以 使 用 RegExp 构 
造 函 数 来 创建 。 

你 可 以 通过 两 种 方式 创建 正则 表达 式 对 象 ， 最 简单 的 方式 是 通过 字面 量 来 创建 正则 表达 式 ， 
示例 如 下 : 

// 通 过 字面 量 来 创建 正则 表达 式 

var reg = /hello/i; 

通过 字面 量 创建 正则 表达 式 有 这 样 的 规则 : 斜 杠 符 内 编写 正则 表达 式 文本 ， 结 束 斜 杠 的 右 侧 
指定 匹配 模式 。 匹 配 模式 可 以 是 表 3-1 中 几 种 标志 的 组 合 。 
表 3-1 匹配 模式 标志 
匹配 模式 标志 作用 
g 全 局 匹配 (匹配 到 一 个 结果 后 还 会 继续 向 后 匹配 直到 结束 ) 
i 匹配 过 程 忽略 大 小 写 
多 行 匹配 模式 (默认 情况 下 ,开始 符 ^ 与 结束 符 $ 是 工作 在 单行 模式 的 ,将 只 匹配 整个 文本 的 
开始 与 结束 ， 配 置 这 个 参数 后 ， 其 会 匹配 每 一 行 的 开始 与 结束 。 ) 

例如 , 我 们 对 “Hello world hello ”进行 不 区 分 大 小 写 的 全 局 匹配 , 将 会 匹配 到 “Hello” 和 “hello”， 
示例 如 下 : 

Var reg = /hello/ig; 


Var res = "Hello world hello" .match (reg) 
console.log(res);//[ 'Hello'，"hello' ] 











m 
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使 用 RegExp 构造 函数 对 象 来 创建 正则 表达 式 对 象 ， 示 例如 下 : 

Var reg2 = new RegExp ("hello",'ig'); 

console.log("Hello world hello".match(reg2));//[ 'Hello', 'hello' ] 

RegExp0 构 造 函 数 中 可 以 传 入 两 个 参数 (第 2 个 参数 可 选 ) , 第 1 个 参数 为 正则 表达 式 字 符 串 ， 
第 2 个 参数 为 匹配 模式 。 


抽 丝 剥 莫 





RegExp 构造 方法 中 的 第 1 个 参数 可 以 传 入 字符 串 形式 的 正则 表达 式 ， 也 可 以 直接 传 入 字面 
量 语法 的 正则 表达 式 ， 例 如 如 下 的 语法 也 是 正确 的 : 

Var reg2 = new RegExp(/hello/,'ig'); 

console.log("Hello world hello".match(reg2));//[ 'Hello'，'hello' ] 





需要 额外 注意 ， 当 RegExp 构造 方法 中 第 1 个 参数 为 字符 串 时 ， 如 果 此 字符 串 中 有 特殊 字符 则 
需要 进行 转 义 ， 例 如 如 下 两 个 正则 对 象 是 完全 等 价 的 : 

Var re = new RegExp("\\w+"); 

var re = /\w+/; 

关于 正则 表达 式 ， 还 有 很 多 东西 我 们 可 以 深入 探究 一 下 。 正 则 表达 式 又 称 规则 表达 式 ， 通 过 
- 些 符号 的 组 合 来 定义 一 种 搜索 算法 。 简 单 理解 ， 一 个 正则 表 ; 是 一 个 逻辑 公式 ， 通 过 公式 来 
对 文本 进行 精确 或 模糊 搜索 。 正 则 表达 式 中 定义 了 一 些 特殊 字符 ， 大 致 可 以 分 为 4 类 : 字符 类 别 、 
字符 集合 、 边 界 、 数 量词 。 

字符 类 别 用 于 模糊 匹配 ， 即 某 一 个 特殊 字符 可 以 代表 某 一 类 字符 。 常 用 的 特殊 字符 列表 如 表 
3-2 所 示 。 






表 3-2 常用 的 特殊 字符 列表 























字符 含义 示例 

将 匹配 hell: 

. 《小 数 点 ) 匹配 任意 字符 (换行 符 除 外 》 reg= /h..l/; 
"hello".match(reg) 
将 匹配 5h: 

\d 匹配 0~9 的 任何 一 个 数字 字符 reg= Adhy/; 
"Shello".match(reg); 
将 匹配 Eh: 

D 匹配 任意 一 个 不 是 数字 的 字符 reg= \Dh/; 
"Ehello".match(reg) 
将 匹配 he 

\Ww 匹配 一 个 字母 、 数 字 或 下 画 线 字符 reg = /h\w/; 
"Ehello".match(reg); 
将 匹配 hg; 

Ww 匹配 任意 非 字母 、 非 数字 和 非 下 画 线 的 字符 reg= 人 NAW/: 
"hS$llo".match(reg); 
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( 续 表 ) 
字符 含义 示例 
将 匹配 he: 
's 匹配 一 个 空白 符 ， 包 括 空 格 、 制 表 符 、 换 页 符 、 换 行 符 等 | reg= /hse/; 
"h ello".match(reg); 
将 匹配 he: 
\S 匹配 任意 一 个 非 空白 字符 reg= /h\S/; 
"hello".match(reg); 
Vt 匹配 一 个 水 平 制 表 符 
Yr 匹配 一 个 回 车 符 
un 匹配 一 个 换行 符 
Vv 匹配 一 个 垂直 制 表 符 
¥ 匹配 一 个 换 页 符 
[b 匹配 一 个 退 格 符 
0 匹配 一 个 NUL 字符 
hh 匹配 编码 为 hh 的 字符 (十 六 进 制 ) 
\uhhhh 匹配 Unicode 值 为 hhhh 的 字符 
字符 集合 用 于 匹配 某 个 集合 内 的 字符 ， 如 表 3-3 所 示 。 
表 3-3 ”字符 集合 
字符 集合 含义 示例 
将 匹配 he: 
[abc] 匹配 中 括号 内 的 一 个 字符 reg = /h[abced]/; 
"hello".match(reg); 
将 匹配 he: 
[a-b] 匹配 范围 内 的 字符 reg = /h[a-e]/; 
"hello".match(reg); 
[^abc] 匹配 除了 集合 字符 外 的 所 有 字符 
[Aa-b] 匹配 除 集合 范围 外 的 所 有 字符 


用 来 定义 边界 的 特殊 字符 如 表 3-4 所 示 。 
表 3-4 ”定义 边界 的 特殊 字符 

















字符 含义 示例 
将 匹配 到 h: 
时 匹配 字符 串 的 开头 reg=/"h/; 
"hello".match(reg); 
将 匹配 到 o: 
$ 匹配 字符 串 的 结尾 reg = /09/; 


"hello".match(reg); 
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用 来 设置 匹配 字符 数量 的 特殊 字符 如 表 3-5 所 示 。 
表 3-5 ”设置 匹配 字符 数量 的 特殊 字符 














字符 含义 示例 

将 匹配 到 ell 

x* 匹配 0 次 或 多 次 x 字符 reg = /el*/; 
"hello".match(reg); 
将 匹配 到 ell 

于 匹配 1 次 或 多 次 x 字 符 reg = /el+/; 
"hello".match(reg); 

x? 匹配 0 次 或 1 次 x 字符 
将 匹配 到 lo: 

x(2ly) 当 x 字符 后 面 不 是 y 字符 时 才 匹 配 reg =/1(?!D)/; 


"hello".match(reg); 
xly 匹配 字符 x 或 者 字符 y 











将 匹配 到 
xfn} 匹配 连续 n 个 x reg=/ 人 23/ 
"hello".match(reg); 
x{n,} 匹配 至 少 连续 n 个 x 
x{nm} 匹配 连续 出 现 n 一 mm 次 个 x 


上 面 我 们 使 用 了 大 量 的 篇 幅 来 介绍 有 关 正 则 表达 式 的 基础 知识 ， 这 是 十 分 有 必要 的 。 正 则 表 
达 式 广泛 应 用 于 用 户 表单 的 验证 中 , 例如 验证 用 户 输入 的 邮箱 是 否 合法 、 用 户 输入 的 手机 号 是 否 合 
法 等 。 再 回 到 RegExp 实例 对 象 ， 其 中 的 一 些 属性 可 以 用 来 获取 设置 的 正则 匹配 模式 ， 示 例如 下 : 

Var reg = new RegExp(/1./); 

// 是 否 开启 全 局 匹配 模式 

console.log(reg.global);//false 

// 是 否 开 启 忽 略 大 小 写 

console.log(reg.ignoreCase);//false 

// 是 否 开启 多 行 模式 

console.log(reg.multiline);//false 

RegExp 实例 对 象 中 定义 如 下 的 方法 ， 可 以 直接 对 一 个 目标 字符 串 进 行 检测 : 

var reg = new RegExp(/1./); 

// 对 目标 字符 串 进行 正则 匹配 

console.log (reg.exec("hello"));//[ '11', index: 2, input: 'hello' ] 

// 检 测 目 标 字符 串 是 否 可 以 通过 正则 验证 ， 即 匹配 到 结果 

console.log (reg.test ("hello"));//true 


在 实际 开发 中 RegExp 实例 对 象 的 test 方法 要 比 exec 方法 更 加 常用 ， 很 多 情况 下 ， 我 们 都 需 
要 用 它 来 验证 一 个 字符 串 是 否 符合 规则 。 
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3.2.8 JavaScript 中 的 Function 对 象 


前 面 的 章节 中 已 经 对 函数 有 过 简单 介绍 。 我 们 知道 , 函数 实际 上 也 是 一 种 对 象 ,其 是 由 Function 
构造 函数 创建 出 来 的 。Function 实例 对 象 中 的 arguments 属性 可 以 获取 到 调用 函数 时 所 有 传递 进 函 
数 的 实 参 , length 属性 可 以 获取 当前 函数 的 形 参 个 数 。 本 小节 将 介绍 几 个 Function 实例 对 象 的 方法 ， 
这 些 方法 在 JavaScript 面向 对 象 技术 中 十 分 重要 。 

在 JavaScript 中 ，this 是 一 个 十 分 重要 的 关键 字 ， 也 是 略微 难于 理解 的 关键 字 。 在 函数 内 部 ， 
this 的 值 取决 于 函数 是 如 何 调用 的 ， 直 接 调用 全 局 函数 ， 则 函数 内 部 的 this 指向 全 局 对 象 。 如 果 函 
数 作为 某 个 对 象 的 行为 进行 调用 ， 则 其 中 的 this 指向 调用 函数 的 对 象 ， 示 例如 下 : 


Var teacher = { 
name:"Jaki", 
age:"25", 
toString:function(){ 
console.1og(" 姓 名 : "+this .name+"、 人 年龄 : "+this.age) 7 
} 
} 
teacher.toString() ;// 姓 名 : Jaki、 年 龄 : 25 


toString 方法 是 由 teacher 对 象 调用 的 ，toString 方法 中 的 this 就 代表 当前 teacher 对 象 本 身 。 在 
构造 函数 中 使 用 this 则 情况 不 同 ，new 关键 字 会 创建 一 个 空 的 对 象 ， 然 后 将 构造 函数 中 的 this 和 这 
个 对 象 进行 绑 定 。 

了 解 了 this 关键 字 ， 我 们 再 来 看 Function 实例 对 象 中 的 几 个 方法 就 十 分 容易 理解 了 。Function 
实例 对 象 中 的 apply 方法 用 于 指定 调用 方法 的 this 值 和 参数 。 我 们 把 前 边 的 代码 略 作 修 改 ， 示 例 
如 下 : 


var teacher = { 

name:"Jaki", 

age:"25", 

toString:function (owner){ 

console.1log (owner+" 姓 名 : "+this.name+"、 年 龄 : "+this.age); 

3 
teacher .toString ("Teacher") ;//Teacher 姓名 : Jaki、 年 龄 : 25 
var student = { 

name:"Lucy", 

age:23 
1 
teacher .toString.apply (student, ["Student"]);//Student 姓名 : Lucy、 年 龄 : 23 


上 面 的 示例 代码 中 创建 了 两 个 对 象 teacher 与 student。student 对 象 并 没有 toString 方法 ， 但 是 
我 们 可 以 借助 teacher 对 象 的 toString 方法 来 打印 student 对 象 的 信息 。Function 实例 对 象 中 提供 了 
apply 方法 ， 这 个 方法 可 以 接收 两 个 参数 ， 第 1 个 参数 设置 调用 方法 的 上 下 文 ， 即 函数 中 this 关键 
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| 
字 的 指向 ， 第 2 个 参数 为 一 个 数组 ， 数 组 中 的 元 素 将 被 作为 实 参 传 入 函数 。 有 了 apply 方法 ， 我 们 
可 以 实现 某 个 对 象 调用 其 他 对 象 的 方法 。 

与 apply 方法 十 分 类 似 的 还 有 call 方法 , 其 作用 也 是 设置 所 调用 函数 中 this 的 指向 与 传 入 参数 ， 
不 同 的 是 call 函数 中 一 参数 个 数 不 一 定 , 第 1 个 参数 为 要 绑 定 到 this 的 对 象 , 之 后 的 所 有 参数 都 会 
作为 实 参 传 入 函数 ， 示 例如 下 : 


var teacher = { 
name: "Jaki", 
age:"25", 
toString:function (owner){ 
console.1og (owner+" 姓 名 : "+this .name+"、 人 年龄 : "+this . age) 7 
} 
} 
teacher.toString ("Teacher");//Teacher 姓名 : Jaki、 年 龄 : 25 
Var student = { 
name:"Lucy", 
age:23 
} 
teacher.toString.call (student, "Student") ;//Student 姓名 : Lucy、 年 龄 ， 23 


Function 实例 对 象 中 还 提供 了 一 个 bind 方法 ， 这 个 方法 将 会 创建 一 个 新 的 函数 ，bind 方法 中 
第 1 个 参数 为 新 创建 函数 调用 时 的 this 指向 , 之 后 所 有 的 参数 都 将 作为 默认 内 置 实 参 传 入 函数 , 示 
例如 下 : 


var teacher = { 





name:"Jaki", 
age:"25", 
toString:function (owner){ 
console.1og (owner+" 姓 名 : "+this .name+"、 年 龄 : "+this.age); 
} 
} 
teacher .toString ("Teacher") ;//Teacher 姓名 : Jaki、 年 龄 ，25 
Var student = { 
name:"Lucy", 
age:23 
Var studentToString = teacher.toString.bind(student,"Student"); 
studentToString() ;//Student 姓名 : Lucy、 年 龄 : 23 


需要 注意 ，bind 函数 中 定义 的 参数 在 传 入 新 生成 的 函数 时 会 被 置 为 内 置 参数 放 在 所 有 实 参 之 
不 会 被 覆盖 掉 ， 示 例如 下 : 


var teacher = { 


name:"Jaki", 
age:"25", 
toString:function (owner){ 
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console.1og (owner+" 姓 名 : "+this .name+"、 年 龄 : "+this.age); 
console.log (arguments); 
} 
. 
teacher .toString ("Teacher") ;//Teacher 姓名 : Jaki、 年 龄 ，25 
var student = { 
name:"Lucy", 
age:23 
Var studentToString = teacher.toString.bind(student,"Student"); 
//Student 姓名 : Lucy、 年 龄 : 23 
//{ "0: "Student', "1l': "Hello' } 
studentToString ("Hello"); 


3.3 深入 JavaScript 中 的 Object 对 象 


在 JavaScript 中 ，Object 构造 函数 可 以 理解 为 一 个 对 象 包装 器 ， 使 用 这 个 构造 函数 可 以 创建 出 
最 原始 的 实例 对 象 。 我 们 知道 ， 在 JavaScript 中 自 定义 对 象 有 两 种 方式 ， 示 例如 下 
// 使 用 字面 量 语法 创建 对 象 
var teacher = { 
name:"Jaki", 
age:25, 
teaching:function(){ 
console.log("teching..."); 
} 


}; 

// 使 用 object 构造 函数 创建 对 象 

var student = new Object() 

student .name = "Lucy"; 

student .age = 24; 

student .learning = function(){ 

console.log("learning..."); 

Ls 

当 我 们 使 用 Object() 构 造 函 数 来 进行 对 象 的 创建 时 ， 里面 可 以 传 入 一 个 参数 ,构造 函数 会 根据 
传 入 的 参数 类 型 创建 相应 的 对 象 实例 。 

如 上 我 们 定义 的 对 象 都 可 以 直接 通过 点 语法 或 者 中 括号 的 方式 进行 属性 和 方法 的 访问 ， 同 样 
我 们 也 可 以 自由 地 对 对 象 中 的 属性 方法 进行 枚 举 、 修 改 、 删 除 等 。 实 际 上 ， 对 象 中 的 属性 和 方法 都 
有 一 套 配置 参数 ， 这 些 配 置 参数 决定 了 对 象 的 可 读 性 、 可 枚 举 性 和 可 配置 性 等 。 
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3.3.1 为 对 象 属性 进行 配置 


Object 构造 方法 对 象 中 提供 了 一 个 defineProperty() 方 法 , 这 个 方法 会 直接 在 一 个 对 象 上 定义 一 





个 新 的 属性 或 者 修改 一 个 已 经 存在 的 属性 。 示 例如 下 : 
// 使 用 object 构造 函数 创建 对 象 


Var student = new Object()7 

student .name = "Lucy"; 

student .age = 24; 

student .learning = function(){ 
console.log("learning..."); 

}; 

Object .defineProperty(student, "name", { 
configurable:true, 
enumerable:true, 
writable:true, 
value:"July" 

]) 7 

console.log(student.name);//JIuly 


上 面 的 代码 使 用 defineProperty() 方 法 对 student 对 象 的 name 属性 进行 了 重新 配置 ， 这 个 方法 
中 需要 传 入 3 个 参数 ,第 1 个 参数 为 要 进行 配置 的 对 象 , 第 2 个 参数 为 需要 进行 配置 的 属性 名 , 第 


3 个 参数 为 配置 描述 参数 。 


下 面 解释 配置 描述 中 可 选 的 4 个 配置 项 所 代表 的 意义 。configurable 用 来 设置 此 属性 是 否 是 可 
配置 的 ， 当 第 一 次 使 用 defineProperty 方法 对 某 个 属性 进行 配置 时 ， 如 果 将 此 配置 项 设置 为 false， 
则 之 后 不 可 以 再 对 对 象 的 这 个 属性 配置 进行 修改 。enumerable 配置 此 属性 的 可 枚 举 性 ,如 果 设 置 为 
true， 则 此 属性 可 以 被 for-in 结构 遍历 到 ， 如 果 配 置 为 false， 则 此 属性 不 能 被 for-in 结构 遍历 到 。 
writeable 配置 此 属性 的 可 写 性 ， 如 果 设 置 为 true， 则 此 属性 可 以 被 赋值 运算 符 修改 ， 如 果 配 置 为 





false， 则 此 属性 不 能 被 赋值 运算 符 修改 。value 项 其 实 就 是 设置 当前 属性 的 值 。 
也 可 以 在 defineProperty() 方 法 的 描述 参数 中 定义 getter 与 setter 方法 ,getter 方法 的 返 


作为 该 属性 的 值 ，setter 方法 则 是 当 属性 被 赋值 时 被 调用 ， 示 例如 下 : 
// 使 用 object 构造 函数 创建 对 象 


var student = new Object () 7 

student .name = "Lucy"; 

student .age = 247 

student .learning = function(){ 
console.log("learning..."); 

] 7 

Var name = "Lucy"; 

Object .defineProperty (student, "name", { 
configurable:true, 
enumerable:true, 














值 会 被 
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get:function(){ 
console.1og ("正在 使 用 name 属性 ") ; 


return name; 


set:function(value){ 
console .10g ("将 要 设置 name 属性 ") ; 


name = value; 


I 

console.1og (student .name) ;// 正 在 使 用 name 属性 Lucy 
student .name = "July";// 将 要 设置 name 属性 
console.1log (student .name) ;// 正 在 使 用 name 属性 July 


需要 注意 ， 描 述 参数 中 的 value、writable 两 个 配置 项 与 get、set 两 个 配置 项 不 能 同时 存在 ， 否 
则 JavaScript 代码 在 运行 时 会 抛 出 异常 。 有 了 属性 的 get 和 set 配置 , 我 们 可 以 方便 地 监听 对 象 某 个 
属性 的 设置 或 获取 ， 添 加 需要 的 业务 逻辑 。 

Object 构造 函数 对 象 中 还 提供 了 一 个 方法 ， 可 以 一 次 定义 或 修改 多 个 属性 ， 示 例如 下 : 





Var teacher = { 
name:"Jaki", 
age:25, 
teaching:function(){ 
console.log("teching..."); 
} 
}; 
Object .defineProperties (teacher, { 
"name":{ 
value:" 理 少 "， 
writable:false 
}, 
“agersy 
value:25, 
writable:false 


Ds; 


3.3.2 ”Object 构造 方法 对 象 中 的 常用 函数 


除了 前 面 提 到 的 配置 属性 方法 外 ，Object 构造 函数 对 象 中 还 有 一 些 其 他 针对 实例 对 象 操作 的 
方法 ， 其 中 assign 方法 可 以 实现 将 几 个 目标 对 象 中 可 枚 举 的 属性 复制 到 源 对 象 中 ， 示 例如 下 : 


Var teacher = { 
name:"jaki", 
age:24, 
teaching:function(){ 
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console.log("teaching"); 
} 
}; 
Var teacher2 = { 
subject:"JavaScript" 
1 
Object .defineProperty (teacher, "number", { 
value:1001, 
enumerable:false 
Fx 
console.log (teacher.number);//1001 
for (prop in teacher){ 


console.1log (prop); 


} 

// 进 行 对 象 可 枚 举 属性 的 复制 

var obj = {}; 

// 第 1 个 参数 为 目标 对 象 ， 其 后 的 参数 为 要 被 复制 属性 的 对 象 

Object .assign (obj,teacher, teacher2); 

console.log(obj.nametobj.aget+obj.subject);//jaki24JavaScript 

obj.teaching();//teaching 

console.log (obj.number);//undefined 

上 面 的 代码 将 teacher 对 象 和 teacher2 对 象 中 的 可 枚 举 属性 全 部 复制 进 了 obj 对 象 中 ，number 
属性 是 不 可 枚 举 的 , 因此 此 属性 并 没有 进行 复制 , 除 此 之 外 , 从 原型 继承 来 的 属性 也 不 会 被 复制 ( 原 
型 与 继承 在 后 面 有 具体 介绍 ) 。 需 要 注意 ， 在 进行 属性 复制 时 ， 源 对 象 不 可 以 是 null， 如 果 源 对 象 
中 的 属性 名 和 目标 对 象 的 属性 名 重复 ， 则 源 对 象 的 属性 值 会 被 覆盖 。 还 有 要 注意 ，assign 方 
法 进行 的 复制 都 是 浅 复 制 ， 即 如 果 目 标 对 象 的 某 个 属性 值 是 引用 类 型 ， 则 它 复 制 的 是 此 引用 ， 并 不 
是 引用 所 对 应 的 值 ， 示 例如 下 : 

// 深 浅 复 制 


var objl = { 





a:{ 
name: "Jaki" 

}, 

b:25 
Py 
Var obj2 = {}; 
Object .assign (obj2, obj1); 
// 修 改 obj1 
objl.a.name = "Lucy"; 
objl.b = 23; 
//obj2 中 的 b 并 没有 被 修改 ， 因 为 其 是 原始 值 类 型 ， 但 是 a 属性 被 修改 了 ， 因 为 其 是 引用 类 型 
console.log(obj2);//{ a: { name: "Lucy' }, b: 25 } 
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深浅 复制 是 一 个 比较 难于 理解 的 问题 ， 如 果 有 疑 芒 ， 你 可 以 回顾 本 书 第 1 章 内 容 中 关于 原 
始 类 型 与 引用 类 型 的 相关 内 容 。 





Object 构造 方法 中 的 create 函数 也 是 用 于 创建 一 个 对 象 , 其 创建 对 象 的 时 候 可 以 指定 对 象 的 原 
型 和 若干 属性 。 这 里 你 不 需要 对 对 象 的 原型 做 过 多 深入 研究 , 简单 理解 , 原型 是 对 象 所 继承 的 对 象 ， 
对 象 可 以 直接 使 用 原型 中 定义 的 属性 。 例如， 对 于 所 有 讲 JavaScript 教程 的 教师 , 我 们 可 以 定义 一 
个 父 对 象 ,其 中 定义 一 个 所 教 课程 的 属性 ,其 他 由 此 对 象 继承 而 来 的 子 对 象 中 都 可 以 使 用 这 个 属性 ， 
示例 代码 如 下 : 

// 继 承 的 实现 


Var base = { 





subject:"JavaScript" 
} 
Var teacherl = Object.create(base,{ 
"name":{ 
value: "Jaki", 
enumerable:true 
}, 
"age":{ 
value:25, 
enumerable:true 
} 
1); 
console.log(teacher1);//{ name: 'Jaki', age: 25 } 
console.log (teacherl.subject);//JavaScript 


需要 注意 ，create 方法 中 的 两 个 参数 ， 第 1 个 参数 为 所 创建 对 象 的 原型 ， 第 2 个 参数 为 要 创建 
对 象 的 属性 配置 列表 ， 和 defineProperties 方法 中 第 2 个 参数 的 含义 一 致 。 

Object 构造 函数 中 的 freeze 函数 用 于 冻结 对 象 。 冻 结 一 词 指 的 是 不 能 向 对 象 中 添加 新 的 属性 ， 
不 能 修改 或 者 删除 对 象 的 属性 ,同样 也 不 能 对 对 象 中 属性 的 配置 进行 修改 。 简 单 理 解 ， 冻 结 的 对 象 
是 一 个 完全 不 可 变 的 对 象 。freeze 方法 传 入 一 个 对 象 作为 参数 , 然后 返回 被 冻结 的 对 象 。 示例 如 下 : 


Var fre = { 








name:"Jaki" 
] 7 
fre = Object.freeze (fre); 
fre.name = "Lucy"; 
/ /冻结 的 对 象 不 能 修改 


console.log(fre);//{ name: 'Jaki' } 

Object 构造 方法 中 的 isFrozen 方法 可 以 获取 某 个 对 象 是 否 为 被 冻结 的 对 象 。 

Object 构造 函数 对 象 中 的 getOwnPropertyDescriptor 函数 用 来 获取 对 象 某 个 属性 的 配置 信息 ， 
示例 如 下 : 
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Var fre={ 
name:"Jaki" 

3 
J/* 
value: Jakis 

writable: true, 

enumerable: true, 

configurable: true } 
区 
Var des = Object.getOwnPropertyDescriptor (fre, "name") 


Object 构造 函数 对 象 中 的 getOwnPropertyNames 函数 可 以 获取 指定 对 象 所 有 自身 的 属性 , 从 原 
型 继承 来 的 属性 不 包括 在 内 。 需 要 注意 ， 这 个 方法 会 将 可 枚 举 和 不 可 枚 举 的 属性 都 获取 到 。 示 例 
如 下 : 


Var base = { 
subject:"JavaScript" 
} 
Var teacherl = Object.create (base,{ 
"name":{ 
value: "Jaki", 
enumerable:true 
}, 
"age"™s{ 
value:25, 
enumerable:true 


}) 7 
console.log (Object .getOwnPropertyNames (teacherl));//[ 'name'，'age' ] 


Object 构造 函数 对 象 中 getPrototypeOf 方法 可 以 获取 到 某 个 对 象 的 原型 对 象 ， 示 例如 下 : 


var base = { 
subject:"UavaScript" 


Var teacherl = Object.create (base,{ 
"name":{ 
value:"Jaki", 
enumerable:true 
jy 
"age":{ 
value:25, 
enumerable:true 


]) 
console.1log (Object .getPrototypeOf (teacher1));//{ subject: 'UavaScript' } 
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Object 构造 函数 对 象 中 的 seal 方法 用 来 密封 对 象 。 密 封 对 象 是 指 不 能 添加 新 属性 ， 不 能 删除 
已 有 属性 ， 不 能 修改 属性 的 配置 ， 但 是 可 以 修改 属性 的 值 的 对 象 。 密 封 与 冻结 的 唯一 不 同 是 对 象 属 
性 的 值 是 否 可 以 修改 。 示 例如 下 : 


var seal = { 

name:"Jaki" 
] 7 
self = Object.seal(seal) 7 
// 密 封 对 象 不 能 添加 新 属性 
seal.age = 25;//undefined 
console.log(seal .age); 


isSealed 方法 用 来 判断 一 个 对 象 是 否 是 密封 的 。 

除了 冻结 与 密封 ,对 象 还 有 “扩展 ”的 概念 。 可 扩展 表示 对 象 可 以 添加 新 的 属性 ， 不 可 扩展 
表示 对 象 不 能 够 添加 新 的 属性 , 但 是 可 以 删除 和 修改 已 有 的 属性 ，Object 构造 方法 中 也 有 函数 对 对 
象 的 可 扩展 性 进行 控制 ，perventExtensions 方法 用 于 约束 对 象 的 扩展 性 ， 示 例如 下 


Var ext = { 
name:"Jaki" 


} 

// 抑 制 对 象 扩展 

ext = Object.preventExtensions (ext); 
ext.age = 25; 

console.log (ext.age);//undefined 


同样 也 有 isExtensible 方法 用 来 判断 某 个 对 象 是 否 是 可 扩展 的 。 

Object 构造 方法 对 象 中 还 定义 了 一 个 keys 方法 ， 其 会 返回 对 象 自身 可 枚 举 的 属性 名 。 需 要 注 
意 ， 其 和 for-in 遍历 结构 还 是 有 一 些 区 别 的 ，keys 方法 只 会 返回 对 象 自身 的 可 枚 举 属性 ，forin 遍 
历 还 可 以 遍历 出 对 象 原型 链 上 的 可 枚 举 属 性 。 示 例如 下 : 


var base = { 
subject:"JavaScript" 
} 
Var teacherl = Object.create (base,{ 
"name":{ 
value:"Jaki", 
enumerable:true 
}, 
"age":{ 
value:25, 
enumerable:true 
} 
]) 7 
console.1og(Object.keys (teacher1));//[ 'name', 'age' ] 
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3.3.3 Object 实例 对 象 中 的 常用 方法 





Object 实例 对 象 中 也 有 一 些 方法 , 主要 与 其 属性 的 检测 相关 。hasOwnProperty 方法 可 以 用 来 检 
查 对 象 中 是 否 包含 某 个 属性 ， 此 属性 必须 是 对 象 本 身 的， 不 能 是 从 原型 链 上 继承 来 的 ， 示 例如 下 : 
// 判 断 某 个 对 象 本 身 是 否 包含 指定 的 属性 ， 此 属性 不 是 原型 链 上 的 


console.log(teacher.hasOwnProperty ("name"));//true 


isPrototypeOf 方法 用 来 检查 当前 对 象 是 否 在 某 个 对 象 的 原型 链 上 ， 示 例如 下 : 











var teacher = new Object (); 

var prototype = { 
subject:"Javascript" 

}; 

// 设 置 原型 

Object .setPrototypeOf (teacher,prototype); 

teacher.name = "Jaki"; 

teacher.age = 25; 

teacher.teaching = function(){ 
console.log ("teaching"); 

} 

console.1log (prototype.isPrototypeOf (teacher));//true 


propertyIsEnumerable 方法 用 来 检查 对 象 的 某 个 属性 是 否 是 可 枚 举 的 ， 也 将 返回 布尔 值 ， 示 例 
如 下 : 
Var prototype = { 
subject:"JavaSscript" 
By 
// 检 查 对 象 的 某 个 属性 是 否 为 可 枚 举 的 
console.1og (prototype.propertyIsEnumerable ("subject"));//true 


3.4 面向 对 象 编程 技术 


面向 对 象 编程 是 一 种 计算 机 编程 框架 ， 简 称 OOP (Object Oriented Programming) 。 面 向 对 象 
编程 的 基本 原则 是 程序 是 由 独立 作用 的 对 象 组 成 的 , 使 用 面向 对 象 编程 技术 开发 的 软件 有 着 更 好 的 
重用 性 、 灵 活性 和 扩展 性 。 

学 习 面向 对 象 编程 技术 ， 首 先 需 要 了 解 下 面 几 个 概念 。 
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1. 对 象 


对 象 是 面向 对 象 编程 的 核心 ， 没 有 对 象 就 没有 办 法 面向 对 象 。 对 象 是 可 以 实现 某 些 功能 的 小 
单元 ， 对 象 中 会 封装 属性 与 行为 。 在 JavaScript 语言 中 ， 行 为 也 可 以 理解 为 是 一 种 属性 。 属 性 的 实 
质 就 是 变量 或 常量 ,只 是 其 有 特殊 意义 并 与 此 对 象 相关 ， 行 为 的 实质 就 是 方法 ， 即 函数 ， 用 来 实现 
对 象 的 某 些 功能 。 

2. 类 


面向 对 象 实际 上 也 是 自然 生活 的 一 种 模拟 ， 生 活 中 存在 各 种 各 样 的 事物 ， 一 棵 树 是 一 个 对 象 ， 
一 辆 汽车 是 一 个 对 象 ， 每 个 人 也 是 一 个 对 象 ， 等 等 。 我 们 会 将 对 象 进行 分 门 别 类 ， 例 如 生物 下 面 分 
为 动物 和 植物 ， 动 物 下 面 又 分 为 鱼 类 、 鸟 类 、 人 类 等 ， 对 于 人 类 ， 我 们 又 可 以 分 为 男人 和 女人 ， 男 
人 里 面 我 们 可 以 再 细 分 ， 如 老年 、 中 年 、 青 年 和 少年 。 将 世间 万 物 分 类 的 基础 在 于 同一 类 事物 有 统 
一 的 属性 和 类 似 的 行为 , 例如 鸟 类 都 有 翅膀 , 可 以 飞翔 。 这 样 的 分 类 可 以 使 我 们 更 轻松 地 了 解 自然 ， 
管理 事物 。 在 程序 的 世界 里 也 是 如 此 ， 前 面 我 们 一 直 在 拿 教 师 对 象 做 示例 ， 教 师 就 可 以 定义 为 一 个 
类 ， 所 有 的 教师 都 有 姓名 、 年 龄 、 所 教科 目 这 些 属性 ， 只 是 这 些 属 性 的 值 可 能 不 同 。 

3. 封装 

封装 是 将 属性 和 行为 捆绑 在 一 起 ， 创 建 对 象 的 过 程 。 

4. 继承 


继承 描述 的 是 一 种 关系 ， 表 示 类 的 从 属 关系 。 在 继承 体系 中 子 类 会 继承 父 类 的 属性 和 行为 ， 
子 类 也 可 以 重新 定义 自己 的 属性 和 行为 , 同样 , 子 类 也 可 以 修改 从 父 类 继承 来 的 属性 和 行为 。 这 很 
像 现实 生活 中 的 父子 关系 ， 孩 子 会 继承 父亲 的 一 些 外 貌 、 性 格 等 ， 但 是 孩子 也 有 许多 自己 形成 的 
个 性 。 

5. 组 合 


组 合 简单 理解 就 是 一 个 类 可 以 作为 另 一 个 类 的 属性 。 例 如 ， 一 辆 汽车 会 由 很 多 子 零件 组 成 ， 轮 胎 
是 单独 的 类 ， 引 擎 是 单独 的 类 ， 车 体 也 是 单独 的 类 。 这 些 类 组 合 在 一 起 构成 更 加 强大 的 汽车 类 。 

JavaScript 语言 中 虽然 没有 “类 ”结构 ， 但 是 通过 原型 链 ， 我 们 可 以 很 容易 地 实现 上 面 所 提 到 
的 面向 对 象 特性 。 

6. 多 态 

不 同 对 象 对 同一 消息 有 不 同 的 响应 ， 就 是 多 态 。 举 例 而 言 ， 上 课 铃 一 响 ， 所 有 教师 都 要 开始 
教学 动作 , 但 是 不 同 科 目的 教程 所 教 的 内 容 一 定 不 同 。 上 课 铃 就 可 以 理解 为 消息 ， 其 让 教师 执行 教 
学 动作 ， 教 学 动作 就 是 对 象 的 响应 ， 不 同 对 象 响应 不 同 。 





3.4.1 JavaScript 中 模拟 类 的 方式 


JavaScript 当初 在 设计 时 只 是 为 了 执行 一 些 简 单 的 浏览 器 脚本 ， 如 今 JavaScript 几乎 无 所 不 能 ， 
从 前 端 到 后 端 ， 使 用 JavaScript 完成 的 项 目 越 来 越 庞 大 。 不 幸 的 是 ，JavaScript 本 身 并 不 支持 类 ， 
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也 就 是 说 JavaScript 中 并 没有 类 的 概念 。 如 果 我 们 深入 挖掘 一 下 类 的 定义 ， 就 会 发 现在 JavaScript 
中 模拟 出 类 真 的 是 十 分 灵活 和 简单 。 

类 说 白 了 就 是 描述 一 类 对 象 的 通用 属性 ， 也 可 以 理解 为 类 是 对 象 的 模板 。 如 果 我 们 需要 一 个 
教师 对 象 ， 我 们 可 以 直接 定义 这 个 教师 对 象 。 如 果 我 们 需要 很 多 教师 对 象 ， 你 可 能 已 经 想到 了 : 我 
们 可 以 定义 一 个 工厂 方法 来 生成 教师 对 象 。 这 样 ， 在 需要 教师 对 象 的 时 候 ， 不 需要 再 重新 定义 ， 调 
用 这 个 工厂 方法 生成 一 个 教师 实例 对 象 即 可 。 这 个 工厂 方法 实际 上 就 起 到 了 类 的 作用 , 在 JavaScript 
中 ， 这 种 函数 被 称 为 构造 函数 。 














在 很 多 面向 对 象 语言 中 ， 类 是 对 象 的 基础 ， 对 象 是 由 类 构造 出 来 的 。 一 般 ， 类 名 首 字母 大 
写 ， 对 象 名 首 字母 小 写 。 这 是 一 种 编程 规范 。 


JavaScript 中 模拟 类 的 方法 有 很 多 种 ， 如 果 有 兴趣 ， 也 可 以 自己 创造 一 种 。 这 里 将 介绍 4 种 模 
拟 类 的 方法 来 抛砖引玉 ， 和 希望 可 以 帮助 大 家 打开 更 宽广 的 思路 。 


1. 使 用 工厂 方法 模拟 类 
定义 一 个 函数 ， 在 函数 内 部 创建 一 个 空 对 象 ， 并 对 它 进行 一 些 类 实例 的 完善 ， 示 例如 下 : 
// 模 拟 类 


function Teacher (name,age, subject){ 





var obj = {}; 
obj.name = name; 
obj.age = age; 
obj.subject = subject; 
obj .teaching = function(){ 
console.10g ("我 是 "+this .name+", 欢迎 大 家 来 听 "+this .subject+" 教 学 课程 。") ; 


return obj; 
Var jaki = Teacher ("Jaki","25","JavaScript"); 
Var lucy = Teacher ("Lucy","24","Swift"); 
jaki .teaching () ;// 我 是 Jaki, 欢迎 大 家 来 听 JavaScript 教学 课程 。 
lucy.teaching () ;// 我 是 Lucy, 欢迎 大 家 来 听 Swift 教学 课程 。 


2. 构造 方法 模拟 类 
使 用 构造 方法 模拟 创建 一 个 教师 类 ， 示 例如 下 : 
// 模 拟 类 


function Teacher (name,age,subject){ 
this.name = name; 
this.age = age; 
this.subject = subject; 
this .teaching = function(){ 
console.1og ("我 是 "+this .name+" ,欢迎 大 家 来 听 "+this .subject+" 教 学 课程 。") ; 
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了 
1 
var jaki = new Teacher ("Jaki","25","JavaScript"); 
Var lucy = new Teacher ("Lucy","24","Swift"); 
jaki .teaching () ;// 我 是 Jaki, 欢迎 大 家 来 听 Javascript 教学 课程 。 
lucy.teaching () ;// 我 是 Lucy, 欢迎 大 家 来 听 Swift 教学 课程 。 


new 关键 字 我 们 前 面 介绍 过 ， 当 使 用 new 关键 字 调用 一 个 函数 时 ， 首 先 创建 一 个 空 对 象 ， 将 
这 个 对 象 与 构造 方法 中 的 this 进行 绑 定 并 建立 原型 链 , 之 后 执行 构造 方法 进行 对 象 的 构造 , 最 后 将 
3. 使 用 Object 构造 方法 对 象 的 create() 方 法 模拟 类 


在 前 面 章节 已 经 学 习 了 Object 构造 方法 对 象 中 的 create() 函 数 ， 这 个 函数 的 作用 是 创建 一 个 以 
某 个 对 象 为 原型 的 对 象 。 我 们 可 以 使 用 这 个 方法 来 模拟 类 ， 示 例如 下 : 


Var Teacher = { 
name: "Jaki", 
age:25, 
subject:"Javascript", 
teaching:function(){ 
console.1o0g ("我 是 "+this .name+" ,欢迎 大 家 来 听 "+this .subject+" 教 学 课程 。") ; 
} 
} 
Var jaki = Object.create (Teacher); 


jaki .teaching () ;// 我 是 Jaki, 欢 迎 大 家 来 听 JavaScript 教学 课程 。 

使 用 这 种 方式 来 模拟 类 有 一 个 次 端 ， 在 构造 实例 对 象 的 时 候 没有 办 法 传 入 参数 ， 如 果 要 对 对 
象 的 属性 进行 赋值 ， 必 须 在 构造 对 象 后 再 单独 进行 设置 。 

4. 封装 法 

封装 法 模拟 类 的 思路 来 源 于 其 他 面向 对 象 语言 的 启发 。 示 例如 下 : 


Var Teacher = { 
init:function (name,age, subject){ 
var teacher = {}; 
teacher .name = name; 
teacher.age = age; 
teacher.subject = subject; 
teacher .teaching = function(){ 
console .1og ("我 是 "+this .name+", 欢迎 大 家 来 听 "+this.subject+" 教 学 课程 。") ; 
} 
return teacher; 
} 
nn 
Var jaki = Teacher.init ("Jaki",25,"JavaScript"); 
Var lucy = Teacher.init ("Lucy",24,"Swift"); 
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jaki .teaching () ;// 我 是 Jaki, 欢迎 大 家 来 听 JavaScript 教学 课程 。 

lucy.teaching () ;// 我 是 Lucy, 欢迎 大 家 来 听 Swift 教学 课程 。 

使 用 封装 法 模拟 类 有 一 些 先天 的 优势 ， 可 以 很 方便 地 在 类 中 定义 私有 属性 和 私有 方法 ， 也 可 
以 区 别 于 实例 方法 和 属性 很 容易 地 定义 类 方法 和 类 属性 。 











在 许多 面向 对 象 语言 中 都 有 实例 属性 、 实 例 方法 与 类 属性 、 类 方法 的 定义 ， 有 些 语言 也 会 


用 静 态 属性 和 静 态 方法 来 描述 类 属性 类 方法 (如 Swift )。 实 例 属性 实例 方法 是 绑 定 在 实例 对 
象 上 的 ， 类 属性 与 类 方法 则 是 直接 绑 定 在 类 上 的 。 





3.4.2 在 JavaScript 中 实现 继承 机 制 


在 JavaScript 中 实现 继承 机 制 的 方式 也 多 种 多 样 。 和 模拟 类 的 学 习 相 似 ， 这 里 将 介绍 3 中 实现 
继承 机 制 的 方法 ， 分 别 为 对 象 冒充 法 、 原 型 法 和 混合 法 。 和 希望 学 习 了 这 些 方法 后 可 以 打开 思维 ， 更 
深入 地 理解 JavaScript 语言 的 精髓 。 


1. 使 用 对 象 冒充 的 方式 实现 继承 


对 象 冒充 的 方式 利用 了 JavaScript 中 this 关键 字 的 特性 this 关键 字 在 函数 内 出 现时 ， 表 示 调 
用 此 函数 的 对 象 ) 。 我 们 还 以 教师 类 为 例 ,首先 所 有 的 教师 都 是 人 类 ， 人 类 都 有 年 龄 和 姓名 , 因此， 
我 们 可 以 创建 一 个 People 类 作为 教师 类 的 父 类 ， 示 例 代码 如 下 : 

// 创 建 People 类 作为 父 类 


function People (name,age){ 
this.name = name; 
this.age = age; 
} 
function Teacher (name,age, subject){ 
// 这 一 步 的 作用 是 转换 this 的 指向 
this.init = People7 
this.init (name,age); 
delete this.init; 
// 添 加 教师 类 特有 的 属性 
this.subject = subject; 
this .teaching = function(){ 
console.1og(" 教 师 "+this .name+" 正 在 教授 "+this .subject+" 课 程 。") ; 
] 7 
Var jaki = new Teacher ("Jaki",25,"JavaScript"); 
Var lucy = new Teacher ("Lucy",24,"Swift"); 
jaki .teaching () ;// 教 师 Jaki 正在 教授 JavaScript 课程 。 
lucy.teaching () ;// 教 师 Lucy 正在 教授 Swift 课程 。 


上 面 的 示例 代码 创建 了 一 个 最 简单 的 继承 体系 , Teacher 实例 对 象 成 功 继承 了 People 类 中 定义 
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的 姓名 和 年 龄 属性 。 其 实 可 以 将 上 面 的 代码 进行 简化 ， 改 变 函数 内 this 的 指向 ， 使 用 call 函数 和 
apply 函数 都 可 以 做 到 ， 示 例如 下 : 





function 
this. 
this. 
} 


function 


People (name,age){ 
name = name; 
age = age; 


Teacher (name,age, subject){ 


People.call (this,name,age); 


this. 
this. 


subject = subject; 
teaching = function(){ 


console.1og ("教师 "+this .name+" 正 在 教授 "+this.subject+" 课 程 。")， 


] 7 
于 
Var jaki 
Var lucy 


= new Teacher ("Jaki",25,"JavaScript"); 
= new Teacher ("Lucy",24,"Swift"); 


jaki .teaching() ;// 教 师 Jaki 正在 教授 JavaScript 课程 。 
lucy.teaching() ;// 教 师 Lucy 正在 教授 Swift 课程 。 


要 实现 多 继承 也 十 分 容易 ， 示 例如 下 : 


function 


this. 


People (name,age) { 
name = name7 


this.age = age; 


} 


function 


Work (time){ 


this.time = time; 


} 


function 


Teacher (name,age, subject){ 


People.call (this,name,age); 
Work.call (this, 8); 


this 
this 


.Subject = subject; 
.teaching = function(){ 


console .10g ("教师 "+this .name+" 正 在 教授 "+this .subject+" 课 程 。"+" 工 作 时 间 : 
"+this.timet" 小 时 。"); 


] 7 
人 
Var jaki 
Var lucy 


= new Teacher ("Jaki",25,"JavaScript"); 
= new Teacher ("Lucy",24,"Swift"); 


jaki .teaching () ;// 教 师 Jaki 正在 教授 JavaScript 课程 。 工 作 时 间 : 8 小 时 。 

lucy.teaching () ;// 教 师 Lucy 正在 教授 Swift 课程 。 工 作 时 间 : 8 小 时 。 

上 面 代 码 创 建 了 一 个 人 类 和 一 个 职业 类 ， 教 师 类 既 有 人 类 的 属性 也 有 职业 类 的 属性 。 

使 用 对 象 冒充 的 方式 实现 继承 体系 十 分 简单 ， 但 是 严格 上 讲 ， 其 并 非 是 真正 意义 上 的 继承 ， 
使 用 原型 链 的 方式 会 实现 更 加 类 似 于 传统 意义 上 的 继承 。 
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多 继承 是 指 一 个 子 类 可 以 有 多 个 父 类 。C++ 是 支持 多 继承 的 一 种 语言 ，Java、Objective-C、 
Swift 等 语言 并 不 支持 这 种 特性 。 





2. 使 用 原型 链 的 方式 实现 继承 


原型 链 是 JavaScript 中 最 难 理解 也 是 最 令 人 费解 的 一 部 分 。 为 了 便于 理解 ,我 们 可 以 再 来 研究 
一 下 new 关键 字 到 底 做 了 什么 。 首 先 ， 在 JavaScript 中 ， 你 要 始终 保持 除 原始 值 外 万 事 万 物 都 是 对 
象 这 样 一 种 思想 ， 函 数 也 是 一 种 对 象 。 当 创建 函数 时 ， 首 先 会 创建 这 个 函数 对 象 本 身 ， 除 此 之 外 ， 
还 会 创建 一 个 对 象 作为 此 函数 对 象 的 prototype 属性 ， 例 如 : 





function People(){ 
this.sayHi=function(){ 
console.log("Hello,I am "+this.name+","+this.age+" years old。 "); 
} 

} 

console.log (People.prototype);//People {} 

你 一 定 奇怪 , 这 个 People 函数 的 prototype 为 什么 会 打印 出 People 人 0 信息 。 其实 这 只 是 一 种 格 
式 化 的 输出 ， 函 数 的 prototype 就 是 一 个 普通 的 Object 对 象 ， 这 个 对 象 中 自动 生成 了 一 个 属性 
constructor，constructor 默认 指向 当前 的 函数 对 象 ， 即 People。 当 使 用 new 关键 字 调 用 People 方法 
进行 实例 对 象 的 构造 时 ， 会 以 如 下 步骤 进行 : 

CI01 创建 空 对 象 {}， 暂 且 命名 为 obj。 

C02 将 构造 函数 中 的 this 指向 obj, 并 将 obj 的 __proto ”属性 指向 构造 函数 的 prototype 属 
性 ， 建 立 原型 链 。 

CIT03 执行 构造 函数 

《ED4 将 对 象 obj 返回 . 

这 里 还 有 必要 介绍 一 些 proto _ 属 性 , 其 是 Object 实例 对 象 中 的 一 个 私有 属性 , 这 个 属性 指 
向 了 当前 对 象 的 原型 对 象 。 

上 面 的 文字 描述 可 能 不 是 很 容易 理解 ， 图 3-1 比较 直观 地 解释 了 原型 链 的 原理 。 


Function 函 数 对 象 






使 用 new 关 键 字 构造 实例 对 象 


图 3-1 原型 链 示意 图 
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使 用 原型 链 的 方式 实现 继承 ， 示 例 代码 如 下 : 
function People()1{ 
this .sayHi=function()1{ 
console.log("Hello,I am "+this.namet+","+this.age+" years old。") 
} 
} 
function Teacher (name,age, subject){ 
this.name = name; 
this.subject = subject; 
this.age = age; 
} 
// 设 置 prototype 属性 
Teacher .prototype = new People(); 
Var jaki = new Teacher ("Jaki",25,"JavaScript"); 
Var lucy = new Teacher ("Lucy",24,"Swift"); 
jaki.sayHi();//Hello,Il am Jaki,25 years old。 
lucy.sayHi();//Hello,Il am Lucy,24 years old。 


如 上 代码 所 示 ， 在 Teacher 实例 对 象 中 并 没有 sayHi 方法 ， 在 代码 执行 时 ， 首 先 会 在 Teacher 
实例 对 象 内 部 寻找 这 个 方法 ， 如 果 没 有 找到 ， 会 向 实例 对 象 的 __proto 属性 中 去 找 ， 这 个 属性 其 
实 就 是 Teacher 函数 对 象 的 prototype 指向 的 对 象 ， 即 People 实例 对 象 。 在 这 个 People 实例 对 象 中 
找到 了 sayHi 方法 ,将 此 方法 返回 ,如果 没有 找到 , 会 再 向 People 实例 对 象 的 __proto__ 属 性 里 找 ， 

- 层 一 层 递 归 下 去 , 直到 找到 或 者 最 终 对 象 的 __ proto ”属性 为 undefined。 访 问 属 性 时 也 是 一 样 的 
原理 ， 这 便 形 成 了 一 套 完整 的 原型 链 。 

使 用 原型 链 实现 的 继承 有 一 个 很 大 的 优势 , 其 可 以 使 用 instanceof 关键 字 来 检查 某 个 构造 函数 
是 否 在 对 象 的 原型 链 上 ， 这 十 分 类 似 于 检查 某 个 对 象 是 否 为 某 个 类 或 其 子 类 的 实例 ， 示 例如 下 : 


console.log(jaki instanceof People) ;//true 


当然 原型 链 的 继承 模式 也 有 一 些 缺点 ， 比 如 原型 链 是 单 链 ， 无 法 实现 多 继承 。 通 过 原型 链 继 
承 来 的 子 类 的 实例 在 访问 属性 时 ,可 能 会 付出 一 定 的 性 能 做 代价 ， 因 为 其 总 是 递归 遍历 从 下 往 上 碍 
找 属性 的 ， 如 果 访 问 一 个 undefined 的 属性 ， 此 性 能 代价 会 更 大 。 


在 JavaScript 中 没有 严格 的 私有 属性 的 定义 ， 这 里 说 的 私有 属性 其 实 是 编码 习惯 上 的 ， 在 开 


发 中 ， 我 们 常常 把 不 想 让 外 界 访 问 的 属性 使 用 双 下 画 线 开 头 和 结尾 ， 将 其 作为 一 种 编码 规 
范 上 的 私有 。 





3. 混合 模式 


对 象 冒 充 的 方式 实现 的 继承 归根 到 底 是 一 种 假 继承 ， 实 质 上 所 有 实例 对 象 都 有 完整 的 一 套 属 
性 和 方法 ， 一 般 不 同 对 象 的 属性 值 各 有 差异 ， 每 个 对 象 都 有 一 套 独 立 的 属性 ， 这 点 倒 不 是 问题 ， 问 
题 在 于 所 有 同类 的 实例 对 象 方法 都 是 一 致 的 , 每 个 对 象 都 有 独立 的 一 套 就 失去 了 继承 的 意义 。 原 型 
链 的 方式 实现 继承 时 ， 父 类 的 方法 是 放 在 原型 对 象 中 的 ， 并 不 在 对 象 本 身 里 , 因此 所 有 同类 的 实例 
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对 象 都 是 共享 这 些 方法 的 , 但 是 其 也 有 一 个 致命 的 缺陷 , 这 种 方法 无 法 在 原型 对 象 创建 时 指定 参数 ， 
这 也 是 为 什么 我 们 上 面 的 示例 中 将 教师 姓名 、 年龄 属性 放 在 了 子 类 中 而 不 是 父 类 。 那么 如 何 实现 继 
承 才 是 最 优 的 模式 呢 ? 答案 很 简单 ,将 属性 使 用 对 象 冒充 的 方式 来 继承 , 方法 使 用 原型 链 的 方式 来 
继承 。 示 例如 下 : 





function People (name,age){ 
this.age = age; 
this.name = name; 


} 
// 方 法 都 放 入 原型 链 中 
People.prototype = { 
constructor:People, 
sayHi:function(){ 
console.log("Hello,I am "+this.name+","+this.age+" years old。 "); 
} 
} 
function Teacher (name,age,subject){ 
// 用 对 象 冒充 把 属性 继承 过 来 
People.call (this,name,age); 
this.subject = subject; 
} 
Teacher.prototype = new People(); 
var jaki = new Teacher ("Jaki",25,"JavaScript"); 
Var lucy = new Teacher ("Lucy",24,"Swift"); 
jaki.sayHi();//Hello,Il am Jaki,25 years old。 
lucy.sayHi();//Hello,Il am Lucy,24 years old。 


这 种 混合 模式 实现 的 继承 也 是 基于 原型 链 的 ， 因 此 也 可 以 使 用 instanceof 关键 字 判 断 对 象 是 否 
是 某 个 类 或 其 子 类 的 实例 。 


译 型 语言 对 语法 都 有 着 严格 的 控制 ， 相 比 之 下 ，JavaScript 真 的 是 一 种 非常 灵活 的 语 
要 你 敢 想 ， 动 手 去 尝试 ， 就 会 发 现 其 中 乐趣 无 限 。 





ECMAScript 6 新 特性 


前 面 的 章节 我 们 一 直 在 使 用 JavaScript 这 个 名 词 ，ECMAScript 又 是 什么 呢 ? 它 和 JavaScript 
之 间 有 什么 关系 ? 要 明白 这 个 问题 ， 首 先 需要 了 解 两 个 概念 : 标准 与 实现 。 

标准 也 可 以 理解 为 一 套 规则 ， 任 何人 造 的 结构 化 的 事物 都 需要 有 一 套 标 准 ， 例 如 工业 中 生产 
的 螺母 ， 生 产 螺母 的 厂家 可 能 各 种 各 样 ， 但 是 螺母 的 工业 标准 是 一 致 的 。ECMAScript 就 是 一 种 标 
准 ， 其 是 浏览 器 脚本 语言 的 标准 ，JavaScript 语言 就 是 ECMAScript 标准 的 一 种 实现 ， 当 然 实现 
ECMAScript 标准 的 浏览 器 脚本 语言 不 只 有 JavaScript 一 种 (例如 Jscript 和 ActionScript) ， 但 
JavaScript 无 疑 是 其 中 最 完善 最 流行 的 一 种 。ECMAScript 6 〈 以 下 简称 ES6) 是 指 ECMAScript 标 
准 的 第 六 版 ， 由 于 其 和 上 一 版 相 比 差 别 很 大 ， 并 且 使 用 React Native 开发 移动 应 用 时 使 用 的 也 是 
ES6 的 标准 ， 因 此 我 们 有 必要 对 ES6 中 的 新 特性 进行 系统 的 学 习 。 








你 前 面 使 用 的 JavaScript 解 释 程 序 是 支持 ES6 语法 的 ,只 是 我 们 还 没有 写 新 特性 相关 的 代码 。 


4.1 ECMAScript 6 的 块 级 作用 域 


在 前 面 介绍 JavaScript 语法 的 内 容 中 ， 并 没有 提 到 作用 域 这 个 概念 。 原 因 是 JavaScript 中 有 一 
种 十 分 特殊 的 语法 规则 : 变量 提升 。 如 果 你 使 用 了 一 个 从 未 声明 过 的 变量 ， 程 序 运行 会 直接 抛 出 异 
常 。 但 是 如 果 代 码 中 有 过 对 此 变量 的 声明 , 无 论 在 声明 前 使 用 还 是 在 声明 后 使 用 ， 程 序 都 不 会 再 抛 
出 异常 ， 例 如 : 

// 变 量 提升 


console.log (name) ;//undefined 
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Var name = "Jaki"; 
console.log (name) ;//Jaki 


造成 这 种 语法 特性 的 原因 是 JavaScript 解释 器 在 对 代码 进行 扫描 时 , 会 将 声明 的 变量 和 函数 先 
定义 为 全 局 符号 , 运行 到 具体 定义 处 时 才 进 行 赋值 。 这 种 语法 特性 多 多 少 少 会 造成 一 些 误解 ,在 许 
多 其 他 流行 编程 语言 中 , 变量 在 声明 之 前 是 严格 不 能 使 用 的 。 如 果 说 上 面 的 示例 代码 造成 误解 的 问 
题 不 大 ， 那 么 下 面 的 代码 就 更 能 说 明 问 题 了 : 

// 变 量 提升 

console.log (name) ;//undefined 

if (false) { 


Var name = "Jaki"; 

} 

console.log (name);//Jaki 

For (yar dw Oy de 
var sum = i; 

} 

console.1o0g(i);//3 

console.1log (sum);//2 


在 上 面 的 示例 代码 中 ， 首 先 if 条 件 语句 使 用 为 假 ，if 代码 块 永远 不 会 执行 到 ， 但 是 从 打印 结 
果 可 以 看 出 name 变量 还 是 被 声明 了 ， 这 已 经 有 些 奇 怪 了 ， 对 吧 ? 后 面 的 循环 结构 中 ， 我 们 在 for 
循环 条 件 结构 中 声明 了 一 个 i 变量 ， 在 循环 体内 声明 了 sum 变量 ， 可 是 当 循环 结束 后 ，i 变量 依然 
存在 ， 变 成 了 全 局 变量 。sum 变量 同样 也 变 成 了 全 局 变量 ， 这 就 不 仅 是 奇怪 的 问题 了 ， 这 种 变量 提 
升 会 消耗 一 部 分 无 用 内 存 并 对 之 后 代码 的 编写 产生 额外 的 风险 。 在 ES6 标准 中 ， 新 引入 了 块 级 作 
用 域 ， 可 以 完美 地 解决 这 些 问题 。 





4.1.1 let 关键 字 


ES6 标准 中 的 块 级 作用 域 实际 上 是 由 let 与 const 关键 字 决定 的 。 在 ES6 标准 中 新 引入 了 let 
和 const 关键 字 ， 其 用 法 十 分 类 似 于 var 关键 字 ， 都 是 进行 变量 的 声明 。 不 同 的 是 ，var 声明 的 变量 
会 存在 变量 提升 和 泄露 为 全 局 变量 的 问题 ，let 和 const 声明 的 变量 则 只 在 其 所 在 的 代码 块 中 有 效 。 
举例 如 下 : 


// 块 级 作用 域 
{ 
var a = 107 
Eb = 10F 
console.1log(b);//10 
} 
console.1og(a);//10 
console.1og (b) ;// 程 序 抛 出 异常 


上 面 的 代码 当 程序 运行 到 console.log(b) 时 会 抛 出 异常 。 也 就 是 说 ， 使 用 let 命令 声明 的 变量 ， 
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一 旦 脱离 其 所 在 的 代码 块 , 这 个 变量 就 不 再 可 以 使 用 .这 种 局 部 变量 十 分 适合 用 于 for 循环 结构 中 ， 
例如 : 

for(let i=0;i<3;i++){ 

J 

console.1og (i);// 程 序 抛 出 异常 

let 命令 还 有 一 个 规则 ， 其 不 存在 变量 提升 ， 即 在 变量 声明 之 前 ， 此 变量 是 不 可 使 用 的 ， 而 不 
是 undefined， 例 如 : 

console.1og (a) ;// 程 序 抛 出 异常 





let a = 10; 

使 用 let 声明 的 变量 也 不 可 以 进行 重复 声明 ， 如 下 的 写法 也 会 抛 出 异常 : 
let a= 10; 

let a = 11;// 程 序 抛 出 异常 


在 ES6 标准 中 ,还 存在 一 个 暂时 性 死 区 的 概念 。 只 要 块 级 作用 域 中 使 用 let 命令 进行 了 变量 声 
明 ， 那 么 它 所 声明 的 变量 就 会 绑 定 进 这 个 区 域 不 再 受 外 部 影响 。 这 种 语法 特性 就 称 为 暂时 性 死 区 ， 
示例 如 下 : 
let tmp = 10; 
{ 
console.1og (tmp) ;// 程 序 抛 出 异常 
let tmp = 11; 
console.log (tmp);//11 
} 


上 面 的 示例 代码 说 明 ， 在 块 级 作用 域 中 使 用 let 声明 了 变量 ， 那 么 在 声明 之 前 ， 这 个 变量 都 不 
能 进行 使 用 (尽管 全 局 中 也 定义 了 这 样 一 个 变量 〉。 

我 们 回 过 头 再 来 理解 下 块 级 作用 域 。 在 ES5 标准 中 除了 函数 和 try-catch 会 生成 作用 域外 ， 没 
有 额外 的 块 级 作用 域 这 个 概念 的 , 我 们 在 编写 代码 时 很 容易 产生 内 层 变量 覆盖 外 层 变量 和 局 部 变量 
泄露 为 全 局 变量 的 问题 。 块 级 作用 域 做 到 了 作用 域内 的 变量 不 受 外 界 影响 同时 也 不 会 影响 外 界 , 提 
高 了 代码 的 安全 性 。 块 级 作用 域 也 是 可 以 嵌 套 的 ， 外 层 作 用 域 无 法 读 取 内 层 作用 域 的 变量 ， 示 例 
如 下 : 

// 将 打印 

/* 

Hello World 





let a = "New"; 
{ 
Lettat = Na 
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攻 
let a = "Hello World"; 
console.log(a); 
F 
console.1log(a) 7 
} 
console.1log(a); 
. 


对 于 函数 的 声明 ， 在 ES6 中 遵守 块 级 作用 域 的 规则 ， 在 作用 域内 声明 的 函数 只 能 在 作用 域内 
使 用 ， 例 如 : 





{ 
let func = function(){ 
console.log("function"); 
有 
func () ;//function 
} 
func () ; // 程 序 抛 出 异常 


4.1.2 ”const 关键 字 


在 许多 编程 语言 中 除了 有 变量 的 概念 外 , 还 有 常量 的 概念 。 常 量 就 是 值 不 能 改变 的 量 , 在 ES6 
标准 中 ， 使 用 const 关键 字 来 进行 常量 的 声明 。 修 改 常量 的 值 会 使 程序 抛 出 异常 ， 示 例如 下 : 
const PI = 3.14; 
PI = 3;// 抛 出 异常 
需要 注意 ， 在 使 用 const 声明 变量 时 要 同时 为 其 赋值 ， 一 旦 const 变量 被 定义 ， 后 面 就 不 能 够 
再 对 它 进行 修改 。const 关键 字 声 明 的 变量 和 let 关 键 字 声明 的 变量 享有 同样 的 作用 域 规则 ， 这 里 就 
不 再 次 述 。 
const 声明 的 常量 有 一 点 需要 额外 注意 ，const 实际 保证 的 是 常量 空间 所 存储 的 数据 不 能 修改 ， 
并 不 一 定 是 常量 所 对 应 的 值 不 能 修改 。 如 果 常 量 对 应 的 是 一 个 对 象 , 你 可 以 对 此 对 象 的 属性 方法 等 
进行 修改 ， 但 是 不 可 以 直接 将 此 常量 指向 的 对 象 修改 掉 ， 示 例如 下 : 
const teacher = { 
name:"Jaki", 
age:25 
}; 
// 对 对 象 进 行 修改 没 问题 
teacher .name = "Lucy"; 
teacher.age = 24; 
// 直 接 修改 常量 的 指向 则 会 报错 


teacher = { 
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name:"Lucy", 
age:24 
x 


4.2 解构 赋值 


解构 赋值 是 ES6 中 一 个 十 分 强大 的 特性 。 人 掌握 了 这 种 技术 ， 你 将 能 十 分 轻松 地 从 数组 、 对 象 
等 结构 中 提取 记 需 要 的 值 。 解 构 赋值 通俗 理解 就 是 分 解数 据 的 结构 ， 为 变量 进行 赋值 。 这 种 语法 特 
性 广泛 应 用 于 数组 的 分 解 、 对 象 的 分 解 、 字 符 串 的 分 解 、 函 数 参 数 的 分 解 等 。 


4.2.1 数组 的 解构 赋值 


通过 前 面 知 识 的 学 习 ， 你 应 该 已 经 熟练 掌握 了 JavaScript 中 数组 结构 的 用 法 。 你 一 定 还 记得 ， 
数组 实际 上 是 一 种 特殊 的 对 象 ， 其 属性 名 是 递增 的 整数 。 如 果 我 们 要 从 数组 中 取 值 , 通常 会 采用 如 
下 方式 : 

let students = ["Jaki","Lucy","Mery", "July"]; 

// 取 数组 中 第 1 个 元 素 

let stul = students[0];//Jaki 

// 取 数组 中 第 2 个 元 素 

let stu2 = students["1"];//Lucy 


如 果 我 们 需要 把 数组 中 所 有 的 值 都 提取 到 对 应 的 变量 中 ， 那 么 上 面 的 方法 是 十 分 麻烦 的 ， 需 
要 手动 地 声明 每 个 变量 ， 并 对 它 进行 赋值 。 在 ES6 中 使 用 解构 赋值 ， 问 题 将 变 得 十 分 简单 ， 示 例 
如 下 : 

// 进 行 数组 的 解构 赋值 


let [a,b,c,d] = students; 
console.log(at" "+b+" "+c+" "+d);//Jaki Lucy Mery July 


上 面 代码 将 数组 中 的 值 按 顺序 提取 到 了 a、b、c、d 变量 中 。 需 要 注意 ， 解 构 赋值 前 面 的 let 
关键 字 和 正常 的 变量 声明 意义 一 致 , 因此 如 果 解 构 赋值 中 新 声明 的 变量 在 前 面 声明 过 , 则 程序 会 
出 异常 (当然 使 用 var 关键 字 不 会 有 这 个 问题 )》。 上 面 示例 的 代码 students 数组 中 有 4 个 元 素 ， 进 
行 解构 赋值 的 表达 式 中 也 声明 了 4 个 变量 ,数组 中 的 元 素 刚好 可 以 和 解构 赋值 表达 式 中 的 变量 一 一 
对 应 ,这 种 解构 赋值 的 场景 叫做 完全 解构 。 与 其 相对 ,如 果 解 构 赋 值 表达 式 中 声明 的 变量 与 数组 中 
的 元 素 个 数 并 不 一 一 对 应 ， 就 会 产生 不 完全 解构 ， 示 例如 下 : 

// 不 完全 解构 

// 只 提取 数组 中 的 前 三 个 数据 

let [e,f,g] = students; 

console.1log(e+" "+f+" "+g);//Jaki Lucy Mery 

// 只 提取 数组 中 的 第 四 个 数据 

let [,,,h] = students; 
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console.log(h);//July 

// 提 取 数 组 中 的 第 1 个 值 ， 并 将 余 值 放 入 另 一 个 数组 

let [i,...j] = students; 

console.log(i+" "+j);//Jaki [Lucy,Mery, July] 

// 洲 出 的 变量 将 被 赋值 为 undefined 

let [k,l,m,n,o] = students; 

console.1og(k+" "+1+" "+m+" "+n+" "+0);//Jaki Lucy Mery July undefined 


数组 的 解构 赋值 也 支持 嵌 套 ， 只 要 解构 表达 式 的 嵌 套 结构 与 数组 的 嵌 套 结构 一 致 ， 就 可 以 解 
构 赋 值 成 功 ， 例 如 : 

// 解 构 赋 值 的 霸 套 

let array = [1,2, [5,6,7]]7 

let [p,q [r,s,t]] = array; 

console.log(""+p+qtr+s+t);//12567 


如 果 解 构 表 达 式 声明 的 变量 有 溢出 ， 则 会 解构 失败 ， 解 构 失败 的 变量 将 默认 被 赋值 为 
undefined。 在 解构 表达 式 中 ， 你 也 可 以 为 变量 设置 一 个 默认 值 ， 当 解构 失败 或 者 解构 出 的 值 为 
undefined 时 ， 此 变量 会 采用 设置 的 默认 值 作为 自己 的 值 ， 示 例如 下 : 

// 设 置 默认 值 

let [u=0,v=0,w=0] = [1l,undefined]; 

console.log (ut+" "+v+" "+w);//1 0 0 


需要 注意 ， 必 须 解 构 失 败 或 者 解构 出 的 值 严格 为 undefined 时 变量 才 会 采用 默认 值 ， 其 他 解构 
出 的 null、false、NaN 等 都 不 会 触发 变量 默认 值 。 例 如 : 

[u=0,v=0,w=0] = [1,NaN,null]; 

console.log(ut" "+v+t" "+w);//1 NaN null 


如 上 代码 所 示 ， 其 实在 进行 解构 赋值 时 ， 并 一 定 要 声明 新 的 变量 ， 也 可 以 将 数组 中 的 数据 解 
构 赋值 到 已 经 存在 的 变量 中 。 需 要 注意 ,如 果 是 对 象 的 解构 赋值 ， 则 必须 将 解构 赋值 表达 式 放 入 小 
括号 中 ， 后 面 会 具体 介绍 。 


4.2.2 ”对 象 的 解构 赋值 


和 数组 的 解构 赋值 类 似 ， 对 象 也 可 以 进行 解构 赋值 。 使 用 对 象 的 解构 赋值 可 以 方便 地 提取 对 
象 的 属性 。 例 如 : 
// 对 象 的 解构 赋值 


let teacher = { 
name:"Jaki", 
age:25, 
teaching:function(){ 
console.log("teaching..."); 
1 
] 7 
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let {name,age,teaching} = teacher; 

console.log (name+" "+age); //jaki 25 

teaching();//teaching... 

对 象 中 的 属性 是 没有 先后 顺序 之 分 的 ， 因 此 在 对 对 象 进行 解构 赋值 时 ， 赋 值 的 变量 名 必须 和 
对 象 中 的 属性 名 完全 一 致 ， 否 则 会 解构 失败 。 如 果 要 自 定义 解构 赋值 的 变量 名 ， 可 以 采用 如 下 映射 
方式 : 

let {name:myName,age:myAge} = teacher; 

console.1og (myName+" "+myAge); //jaki 25 


其 实 对 象 的 结构 赋值 的 默认 结构 是 这 样 的 : 


let {name:name,age:age} = teacher; 





当 要 解构 赋值 的 变量 名 与 对 象 的 属性 名 相同 时 ， 可 以 省 略 映射 结构 。 数 组 也 是 对 象 ， 因 此 也 
可 以 使 用 如 下 方式 对 数组 进行 解构 : 


Jet {Osxrlsyl = [lr213 
console.log (x+" "+y);//1 2 


对 象 的 解构 赋值 也 是 支持 嵌 套 的 ， 这 在 处 理 复 杂 对 象 时 十 分 高 效 ， 例 如 : 


let teacher = { 
name:"Jaki", 
age:25, 
students:[ 
name:"Lucy", 
age:24 


name:"July", 
age:26 
ls 
i 
teaching:function(){ 
console.log("teaching..."); 
人 
] 7 
let {students:[{name:namel}, {name:name2}]} = teacher; 
console.log(namel+" "+name2);//Lucy July 


如 果 是 将 对 象 解构 赋值 到 已 有 的 变量 中 ， 则 解构 赋值 表达 式 必须 放 在 小 括号 内 ， 否 则 会 抛 出 
异常 , 原因 是 JavaScript 解释 器 会 将 大 括号 解析 为 代码 块 而 不 是 表达 式 , 例如 下 面 的 写法 是 正确 的 : 


({name:name,age:age} = teacher); 
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在 对 象 解构 赋值 时 ， 也 可 以 为 变量 添加 默认 值 ， 如 前 面 所 说 ， 只 有 当 解 构 失 败 或 者 解构 出 的 
值 为 严格 的 undefined 时 才 会 触发 默认 值 。 


4.2.3 字符 串 与 函数 参数 的 解构 赋值 


在 进行 字符 串 的 解构 赋值 时 ， 可 以 将 字符 串 理解 为 一 个 字符 数组 ， 示 例如 下 : 


let lclc27cC37cC47C5 = "Hello"y 
console.log (cl+c2+c3+c4+c5) ;//Hello 


这 种 解构 赋值 常用 于 提取 字符 串 中 某 个 位 置 的 字符 。 在 ES6 中 ， 函 数 的 参数 也 可 以 进行 解构 
赋值 ， 在 ES5 标准 中 ， 如 果 你 需要 向 函数 中 传递 数组 或 对 象 ， 通 常 要 这 样 做 : 


let People = { 
name:"Jaki", 
age:25 
] 7 
function print (People){ 
console.log (people.name+":"+people.age); 
] 7 
Print (people);//Jaki:25 


使 用 解构 赋值 的 方式 ， 我 们 可 以 这 样 写 : 


let People = { 
name:"Jaki", 
age:25 
] 
function print({name,age}){ 
console.log (namet+":"+tage); 
}; 
Print (People) ;//Jaki:25 
同样 你 也 可 以 为 函数 的 参数 在 解构 赋值 时 设置 一 个 默认 值 。 需 要 特别 注意 ， 为 函数 参数 解构 
赋值 设置 默认 值 和 设置 函数 参数 的 默认 值 是 完全 不 同 的 ， 请 看 如 下 示例 : 
function print({name="name",age=0}={name:"Jaki",age:25}){ 
console.log (name+":"+age) 7 
] 7 
print ({});//name:0 
print();//Jaki:25 


上 面 的 示例 代码 中 ,如 果 解 构 赋 值 失败 或 者 解构 为 undefined, 参数 name 会 采用 默认 值 “name”， 
参数 age 会 采用 默认 值 0。 但 是 如 果 调 用 函数 时 不 传 入 参数 ， 则 会 采用 参数 对 象 的 默认 值 ， 即 
{name:"jaki",age:25} 这 个 对 象 ， 为 函数 的 参数 设置 默认 值 也 是 ES6 的 特性 之 一 。 
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我 们 来 玩 一 个 小 游戏 ， 交 换 两 个 变量 的 值 ， 最 少 需要 几 步 ? 你 可 能 会 不 假 思索 
代码 : 


let v1=10; 

let v2=11; 

let v3 = v1; 

vl = v2; 

v2 = v3; 
console.log (v1); 
console.1log (v2); 


上 面 的 代码 需要 创建 中 间 变 量 ， 并 且 需 要 至 少 3 步 才能 完成 两 个 变量 值 的 交换 ， 如 果 使 用 
解构 赋值 技术 ， 不 仅 可 以 省 略 中间 变 量 ， 而 且 一 步 即 可 完成 : 


let v1=10; 

let v2=11; 

[v1i,v2] = [v2,v1]; 
console.1log (v1); 
console.log (v2); 





4.3 ”箭头 函数 


箭头 函数 是 ES6 新 引入 的 一 种 创建 函数 的 语法 规则 ， 这 种 语法 可 以 大 程度 地 简化 函数 编写 的 
格式 ， 并 且 会 对 函数 中 的 this 进行 绑 定 。 


4.3.1 箭头 函数 的 基本 用 法 


前 面 我 们 介绍 过 好 几 种 在 JavaScript 中 创建 函数 的 方法 ,虽然 有 所 差别 , 但 其 在 格式 上 都 大 同 
小 异 ， 用 法 上 也 基本 一 致 。 例 如 : 


function exp(a){ 
return a*a; 

} 

let res = exp(5); 

console.log(res); 


如 果 使 用 箭头 函数 语法 对 上 面 的 函数 进行 重 写 ， 结 果 如 下 : 
let f = (a)=>{ 


return a*as 


} 
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let res = 上 (5)7 

console.log (res); 

箭头 函数 的 基本 语法 格式 为 : (参数 列表 )=>{ 函 数 体 }。 如 果 箭头 函数 只 有 一 个 参数 ,并且 函 数 
体 中 只 有 一 行 代码 ， 我 们 可 以 再 进行 简化 ， 示 例如 下 : 

let f = a=>a*a; 

let res = f£f(5); 


console.log (res); 


看 到 如 此 简洁 的 函数 定义 ， 是 不 是 有 眼前 一 亮 的 感觉 呢 ? 


抽 丝 剥 莫 
如 果 箭 头 函数 的 函数 体 只 有 一 句 代 码 ， 并 且 返 回 的 是 一 个 对 象 ， 需 要 将 对 象 包 衰 在 小 括号 


内 ， 这 是 因为 大 括号 默认 会 被 解释 为 代码 块 ， 示 例如 下 : 


let func = ()=>({name:"Jaki"}); 





箭头 函数 在 用 法 上 和 我 们 前 边 介绍 的 普通 函数 并 没有 太 大 的 差异 ， 同 样 也 支持 函数 参数 的 解 
构 赋 值 ， 示 例如 下 : 

let func = ({name,age})=>console.log (name,age); 

func({name:"Jaki",age:25});//Jaki 25 


箭头 函数 这 种 简洁 的 结构 十 分 适用 于 回调 函数 的 编写 ， 在 后 面 的 开发 中 ， 我 们 也 会 经 常 使 用 
箭头 函数 。 


4.3.2 ”箭头 函数 中 this 的 固化 


箭头 函数 有 一 个 十 分 重要 的 特点 , 其 中 this 是 被 固化 的 。 普 通 函数 中 this 默认 是 指向 调用 函数 
的 对 象 ， 当 然 也 可 以 使 用 call、apply、bind 这 些 函 数 进行 this 指向 的 更 改 。 但 是 在 箭头 函数 中 ，this 
是 被 固化 的 ， 也 就 是 说 其 中 的 this 在 定义 函数 时 就 已 经 被 绑 定 ， 不 能 修改 ， 也 和 调用 者 无 关 。 比 较 
下 面 两 段 代码 。 
普通 函数 : 
let teacher = { 
name:"Jaki", 
age:25, 
Print:function(){ 
console.log (this.name, this.age); 
} 
上 
let student = { 
name:"Lucy", 
age:24, 
print:teacher.print 
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业 
teacher.print ();//Jaki 25 
student .print ();//Lucy 24 


箭头 函数 : 


// 箭 头 函数 this 的 固化 
let teacher = { 
name:"Jaki", 
age:25, 
print: ()=>{ 
console.log (this.name,this.age); 


} 
let student = { 
name:"Lucy", 
age:24, 
Print:teacher.print 
} 
teacher.print();//undefined undefined 
student .print ();//undefined undefined 


可 以 发 现 , 箭头 函数 中 的 this 实际 上 并 非 指向 teacher 对 象 或 者 student 对 象 ， 而 是 指向 了 全 局 
对 象 ， 即 箭头 函数 内 部 的 this 就 是 定义 时 所 在 环境 的 this 指向 ， 并 且 会 被 固化 ， 不 能 修改 。 再 来 看 


下 面 这 个 例子 : 


function foo(){ 
this.name = "foo"; 
this.inline = ()=>{ 
console.log (this.name); 
] 7 
this .outline = function(){ 
console.log (this.name); 


let obj = new foo(); 
obj.inline();//foo 
obj.inline.call({name:"Jaki"});//foo 
obj.outline();//foo 

obj.outline.call ({name:"Jaki"});//Jaki 


从 上 面 的 代码 可 以 看 出 , 箭头 函数 在 定义 时 this 就 固化 成 为 foo 函数 对 象 本 身 , 无 论调 用 方 如 


何 修改 ， 这 个 this 指向 都 不 变 。 为 了 简单 理解 ， 我 们 可 以 将 箭头 函数 中 的 this 解析 如 下 : 
function foo(){ 
let thie = thiss 
this.name = "foo"; 
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this.inline = ()=>{ 
console.log( this.name); 
}; 
this.outline = function(){ 
console.log (this.name); 
} 
} 


由 于 箭头 函数 this 固化 的 特性 , 因此 不 能 将 第 头 函数 作为 构造 函数 来 使 用 , 即 不 可 以 使 用 new 
关键 字 来 调用 箭头 函数 。 





抽 丝 剥 莫 
定义 的 全 局 对 象 中 箭头 函数 中 的 this 之 所 以 指向 全 局 对 象 ,是 因为 对 象 可 以 理解 为 是 全 局 对 


象 调用 Object 构造 函数 创建 的 ， 这 个 函数 中 的 this 当然 指向 其 调用 方 全 局 对 象 ， 因 此 箭头 
函数 中 的 this 固化 成 了 全 局 对 象 。 





4.4 ”Set 与 Map 数据 结构 


在 本 书 前 边 的 内 容 中 , 我 们 学 习 了 Array 这 种 数据 结构 ， 抛 开 其 是 对 象 的 本 质 不 说 ,你 可 以 将 
Array 看 成 是 一 种 有 序 的 集合 结构 ， 其 中 的 元 素 因为 是 有 顺序 的 ， 因 此 也 可 以 重复 。Set 是 ES6 标 
准 中 新 引入 的 一 种 集合 数据 结构 ， 其 中 元 素 无 下 标 〈 但 是 可 以 有 序 地 进行 遍历 ) ， 也 不 可 以 重复 。 
Map 也 是 ES6 中 新 引入 的 一 种 数据 结构 ， 十 分 类 似 于 对 象 ， 但 是 也 有 不 同 ， 本 节 我 们 会 具体 介绍 
这 两 种 数据 结构 。 


4.4.1 Set 集合 结构 


Set 是 一 种 集合 结构 ， 人 允许 你 存储 任意 类 型 数据 的 唯一 值 。 所 谓 唯一 值 ， 是 指 所 存储 的 值 不 能 
重复 。 构 造 一 个 Set 集合 对 象 的 示例 如 下 : 

// 创 建 Set 集合 

了 已 二 Se = new Set([1y2r374r4721)s 

console.log(set);//Set { 1，2，3，4 } 


Set 构造 函数 中 可 以 传 入 一 个 数组 对 象 ， 数 组 中 的 值 会 被 作为 Set 集合 的 元 素 插入 集合 中 。 需 
要 注意 ， 数 组 中 的 元 素 如 果 有 重复 ， 就 会 自动 被 剔除 ， 最 终生 成 的 Set 集合 中 的 元 素 都 是 唯一 的 。 
Set 集合 的 这 种 特性 也 可 以 作为 一 种 数组 去 重 的 好 方法 。Set 实例 对 象 的 size 属性 可 以 获取 到 集合 
中 元 素 的 个 数 ， 示 例如 下 : 

let set = new Set([1,2,3,4,4,2]); 

console.log(set.size);//4 
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关于 Set 实例 对 象 中 元 素 的 操作 ， 可 以 使 用 如 下 示例 方法 : 


let set = new Set(); 

// 向 集合 中 插入 元 素 

set.add ("Jaki"); 
set.add("Lucy"); 
console.log(set);//Set { 'Jaki','Lucy' } 
// 删 除 集合 中 的 某 个 元 素 
set.delete("Jaki"); 
console.log(set);//Set {'Lucy'} 
// 删 除 集合 中 的 所 有 元 素 
set.clear (); 
console.log(set);//Set {} 
set.add("Jaki"); 
set.add("Lucy"); 

// 返 回 Set 集合 迭代 器 对 象 


console.log(set.entries());//SetIterator { [ 'Jaki', 'Jaki’' ]，[ 'Lucy', 





'Lucy' ] } 
// 让 集合 中 的 所 有 元 素 调用 一 次 回调 方法 
/* 
将 打印 
Jaki 
Lucy 
ode 
set.forEach( (element)=>{ 
console.log (element); 
},set); 
// 判 断 集合 中 是 否 包含 某 个 元 素 
console.1og(set.has ("Jaki") );//true 
// 下 面 这 两 个 方法 都 是 用 来 获取 集合 中 所 有 元 素 的 迭代 器 
console.log(set.keys());//SetIterator { 'Jaki', 'Lucy' } 
console.log(set.values());//SetIterator { 'Jaki', 'Lucy' } 


上 面 代码 中 的 注释 十 分 详尽 ，Set 实例 对 象 中 的 forEach 方法 和 Array 实例 对 象 的 forEach 方法 
行为 基本 一 致 ， 都 是 将 其 中 元 素 遍历 一 遍 ， 对 每 个 元 素 执行 传 入 的 回调 方法 ，forEach 函数 的 第 2 
个 参数 传 入 的 对 象 会 被 绑 定 到 回调 函数 中 的 this 上 。Set 集合 可 以 使 用 for-of 结构 进行 迭代 ， 示 例 
如 下 : 

/* 

Jaki 

Lucy 

st 

for (item of set){ 

console.log (item); 
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对 象 属性 的 遍历 使 用 的 是 for-in 结构 ，Set 元 素 的 遍历 使 用 的 是 for-of 结构 ， 切 记 不 要 混淆 。 





ES6 中 还 定义 了 一 种 特殊 的 Set 集合 : WeakSet。 正 如 其 名 ， 它 是 一 种 弱 引 用 集合 。 与 Set 集 
合 相 比 ， 它 有 两 个 特点 : 


(1) WeakSet 中 只 能 存放 引用 数据 ， 即 对 象 数 据 ， 不 能 存放 原始 值 。 
(2) WeakSet 中 的 对 象 元 素 都 是 弱 引 用 的 ， 因 此 其 无 法 进行 枚 举 。 


WeakSet 实例 对 象 中 提供 的 方法 如 下 : 


let objl = {name:"Jaki"}; 

let obj2 = {name:"Lucy"}; 

let wSet = new WeakSet ([obj1]); 

// 弱 引用 集合 中 是 否 包含 某 个 元 素 
console.1og(wSet.has (obj1));//true 
// 添 加 一 个 元 素 

wSet .add (obj2) 

// 删 除 一 个 元 素 

wSet .delete (objl) 


弱 引 用 是 指 ， 除 了 集合 之 外 ， 若 没有 其 他 变量 或 属性 引用 这 个 对 象 ， 则 这 个 对 象 值 会 被 垃 
圾 回收 机 制 回收 掉 ， 集 合 中 的 这 个 元 素 也 将 无 效 。 





4.4.2 ”Map 字典 结构 





你 一 定 有 过 查 字典 的 经 历 。 以 汉语 字典 为 例 ， 当 你 需要 查找 某 个 字 的 释义 时 ， 先 要 在 字典 的 
索引 中 找到 这 个 字 , 然后 根据 索引 提供 的 页 标 来 找到 这 个 字 的 释义 。 在 字典 结构 中 , 我们 常常 把 这 
个 “索引 字 ” 称 为 键 ， 把 “释义 ” 称 为 值 。 

许多 编程 语言 中 都 有 字典 数据 结构 , 在 ES6 标准 前 , JavaScript 中 的 对 象 可 以 充当 字典 来 使 用 ， 
但 是 对 象 的 属性 不 能 是 任意 类 型 的 值 ，ES6 标准 中 引入 了 Map 数据 结构 。Map 就 是 简单 的 键 值 映 
射 ， 其 中 键 和 值 都 可 以 是 任意 值 。 和 Set 数据 结构 相似 的 是 ，Map 中 的 键 也 都 是 唯一 的 (不 同 键 的 
值 可 以 相同 ) 。 

Map 实例 对 象 中 的 size 属性 可 以 获取 到 其 中 键 值 对 的 个 数 〈 去 重 后 ) ， 示 例如 下 : 

//Map 字典 

let map = new Map([["name","Jaki"],["age",25],[321,true], [321,true]]); 

console.log (map.size);//3 


下 面 列 出 一 些 常用 的 操作 Map 实例 对 象 的 方法 : 


let map = new Map(); 
// 向 Map 实例 对 象 中 添加 键 值 对 
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map .set ("name", "Jaki"); 
map.set ("age",25); 
map.set (123,true); 
console.log (map);//Map { 'name' => 'Jaki', 'age' => 25, 123 => true } 
// 删 除 一 对 键 值 
map .delete(123) 
console.1og(map);//Map { 'name' => 'Jaki', 'age' => 25 } 
// 返 回 一 个 Map 和 迭代 对 象 
console.log (map.entries());//MapIterator { [ 'name', 'Jaki' ], [ 'age', 25]} 
// 判 断 Map 实例 对 象 中 是 否 包含 某 个 键 
console.log (map.has ("name"));//true 
// 获 取 Map 中 某 个 键 的 值 ， 如 果 键 不 存在 ， 就 会 返回 undefined 
console.log (map.get ("name"));//Jaki 
// 获 取 Map 中 的 所 有 键 
console.1og (map.keys());//MapIterator { 'name', 'age' } 
// 获 取 Map 中 的 所 有 值 
console.log (map.values());//MapIterator { 'Jaki', 25 } 
/* 
将 打印 
name Jaki 
age 25 
ek 
map .forEach ( (value, key)=>{ 
console.log (key,value); 
},map); 
// 清 空 Map 中 的 所 有 键 值 
map.clear(); 
console.1og (map); 


Map 实例 对 象 调用 forEach 方法 来 对 自身 进行 遍历 ， 并 对 每 个 键 值 对 执行 回调 方法 ,回调 函数 
中 第 1 个 参数 为 当前 键 值 对 的 键 ， 第 2 个 参数 为 当前 键 值 对 的 值 。 
Map 数据 结构 也 可 以 使 用 for-of 结构 来 进行 遍历 ， 示 例如 下 : 


/* 
name Jaki 

















age 25 

区 

for(let [a,b] of map){ 
console.log(a,b); 

有 


与 WeakSet 相对 应 ，ES6 中 也 定义 了 一 个 WeakMap。WeakMap 是 一 种 特殊 的 Map， 其 中 所 
有 的 键 只 能 是 引用 类 型 (对象)， 值 可 以 是 任意 类 型 ， 并且 其 对 所 有 对 象 键 的 引用 都 是 弱 引 用 ， 因 
此 WeakMap 也 是 不 可 以 枚 举 的 。WeakMap 实例 对 象 可 用 方法 列举 如 下 
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let wMap = new WeakMap () 
let obj = { 

name:"Jaki" 
' 
// 添 加 键 值 对 
wMap.set (obj,true); 
// 判 断 某 个 键 是 否 存在 
console.1og(wMap .has (obj) ) ;//true 
// 获 取 某 个 键 的 值 
console.log (wMap.get (obj));//true 
// 删 除 一 组 键 值 对 
wMap .delete(obj) 
console.log(wMap .has (obj));//false 


4.5 “Proxy 代理 


ES6 标准 中 定义 了 Proxy 对 象 ， 从 字面 理解 它 是 一 种 “代理 ”对 象 。Proxy 提供 了 一 种 途径 ， 
其 允许 开发 者 对 已 经 存在 的 对 象 行为 进行 拦截 与 修改 。 

举 一 个 小 例子 ， 在 笔者 还 在 上 中 学 的 时 候 ， 父 母 为 笔者 买 了 一 台 可 以 上 网 的 电脑 ， 但 是 他 们 
像 其 他 旦 惧 新 事物 (尤其 是 网 络 ) 的 父母 一 样 ， 担 心 笔者 沉迷 于 网 络 而 荒废 学 业 ， 于 是 他 们 花 大 价 
钱 在 电脑 中 装 了 一 个 管理 软件 ， 只 要 笔者 打开 电脑 , 无 论 是 看 电影 还 是 打 游 戏 , 他 们 都 知道 得 一 清 
二 楚 。 其 实 这 个 管理 软件 就 是 计算 机 的 一 层 代 理 ， 它 不 仅 可 以 监控 计算 机 的 一 举 一 动 , 还 可 以 进行 
拦截 与 修改 行为 (比如 父母 觉得 笔者 看 电影 时 间 有 些 长 , 这 些 软件 就 能 轻松 地 屏蔽 视频 播放 功能 ) 。 


4.5.1 使 用 Proxy 代理 对 对 象 的 属性 读 写 进行 拦截 


首先 创建 一 个 对 象 ， 点 语法 可 以 轻松 地 访问 对 象 的 属性 ， 例 如 : 





let teacher = { 
name:"Jaki", 
age:25, 
teaching:function(){ 
console.log("teaching"); 
} 
console.log (teacher.name);//Jaki 


下 面 我 们 使 用 Proxy 对 teacher 对 象 属性 的 访问 进行 拦截 : 





let proxy teacher = new Proxy (teacher,{ 
set: (target, key, value, receiver)=>{ 
console.1og ("添加 属性 :", key); 
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target [key] = value; 

}, 

get: (target key, receiver)=>{ 
console.1og ("获取 属性 :", key); 
return target[key]; 


]}) 7 

/* 

将 打印 

获取 属性 : name 

Jaki 

添加 属性 : subject 

获取 属性 : subject 

JavaScript 

六 

console.log (proxy teacher .name) 
Proxy teacher.subject = "JavaScript"; 
console.log (proxy_teacher.subject); 


Proxy 构造 函数 中 需要 传 入 两 个 参数 , 第 1 个 参数 为 要 代理 的 对 象 , 第 2 个 参数 也 是 一 个 对 象 ， 
其 中 需要 定义 要 拦截 或 修改 行为 的 方法 , 我 们 通常 也 会 把 它 称 为 处 理 器 对 象 。 在 对 代理 对 象 的 某 个 
属性 赋值 时 ， 会 触发 处 理 器 中 的 set 方法 ， 这 个 方法 中 前 3 个 参数 分 别 表示 原 对 象 、 被 赋值 的 属性 
名 、 所 附 的 值 。 在 读 取代 理 对 象 的 某 个 属性 时 会 触发 处 理 器 中 的 get 方法 ， 这 个 方法 中 的 前 两 个 参 
数 分 别 表示 原 对 象 和 要 访问 的 属性 名 。 

需要 注意 ,要 使 拦截 方法 起 作用 ,必须 使 用 Proxy 代理 对 象 ， 原 对 象 的 属性 访问 操作 并 不 会 触 
发 代理 对 象 的 处 理 器 方法 。 





Proxy 代理 本 身 也 是 一 种 对 象 ， 对 象 可 以 通过 原型 链 的 方式 来 实现 方法 的 继承 ， 因 此 我 们 可 
以 将 Proxy 代理 作为 对 象 的 原型 来 实现 未 定义 属性 的 拦截 ， 示 例如 下 : 


var proxy normal = new Proxy({}, { 


get: function(target, property) { 
console.log("warning:this property is undefined"); 
return undefined; 
和 
]}) 
let obj = Object.create (proxy normal); 


obj .time;//warning:this property is undefined 
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4.5.2 ”Proxy 代理 处 理 器 支持 的 拦截 操作 


4.5.1 小 节 我 们 演示 了 对 属性 读 和 写 的 拦截 操作 ， 分 别 在 处 理 器 中 定义 get 和 set 方法 即 可 。 处 
理 器 支持 的 拦截 操作 不 只 如 此 ， 下 面 的 示例 代码 列 出 处 理 器 对 象 中 可 以 定义 的 拦截 方法 : 


let teacher = { 





name:"Jaki", 

age:25, 

teaching:function(){ 
console.log("teaching"); 


let proxy teacher = new Proxy (teacher,{ 

// 添 加 属性 时 会 触发 

set: (target, key, value, receiver)=>{ 
console. 1og ("添加 属性 "key); 
target [key] = value; 

}, 

// 获 取 属 性 时 会 触发 

get: (target key, receiver)=>{ 
console.log ("获取 属性 :"， key); 
return target[key]; 

}, 

// 判 断 对 象 中 是 否 包含 某 个 属性 时 触发 

has: (target, key)=>{ 
console.10g ("检查 属性 :", key) ; 
return key in target; 

}, 

// 输 出 对 象 属性 时 触发 

deleteProperty: (target, key)=>{ 
console.10g ("删除 属性 :", key) ; 
delete target [key]; 

}, 

// 拦 截 getOwnPropertyNames () 和 keys() 方 法 

ownKeys: (target)=>{ 
console.1og ("获取 所 有 自身 属性 ") ; 
return Object.getOwnPropertyNames (target); 

}, 

// 拦 截 defineProperty() 和 definePropertys () 方 法 

defineProperty: (target, key, desc)=>{ 
console.1og ("定义 属性 :", key); 
return Object.defineProperty (target, key, desc); 

}, 

// 拦 截 preventExtensions () 方 法 
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[ 


preventExtensions: (target)=>{ 
console.1og ("抑制 可 扩展 性 "); 
return Object.preventExtensions (target); 

}, 

// 拦 截 getPrototypeof () 方 法 

getPrototypeOf: (target)=>{ 
console.1og ("获取 对 象 原型 ") ; 
return Object.getPrototypeOf (target); 

}, 

// 拦 截 isExtensible() 方 法 

isExtensible: (target)=>{ 
console.1og ("获取 对 象 可 扩展 性 ") ; 
return Object.isExtensible (target); 

}, 

// 拦 截 setPrototypeof () 方 法 

setPrototypeOf: (target,proto)=>{ 
console.1o0g ("设置 对 象 原型 ") ; 
return Object .setPrototypeOf (target,proto); 

}, 

// 拦 截 call () 和 apply 方法 ， 用 于 函数 对 象 

apply: (target, object,arguments)=>{ 
console.10g ("拦截 call、apply 方法 "); 
target .apply (object,arguments); 

}, 

// 拦 截 构造 函数 方法 

construct: (target,arguments)=>{ 
return {}; 


]) 7 
console.log("name" in Proxy_teacher) ; // 检 查 属性 : name true 
delete proxy_teacher.name // 删 除 属性 : name 


console.1og(Object.getOwnPropertyNames (Proxy_teacher) ) ; // 获 取 所 有 自身 属性 


'name', ‘age', 'teaching' ] 
Object .defineProperty (proxy teacher, "name",{ 
value:"Jaki", 
writable:true, 
configruable:true 
}) ;// 定 义 属性 : name 
// Object.preventExtensions (Proxy_teacher) ;// 抑 制 可 扩展 性 
Object .getPrototypeOf (Proxy_teacher) ;// 获 取 对 象 原型 
Object .isExtensible (Proxy_teacher) ;// 获 取 对 象 可 扩展 性 
Object .setPrototypeOf (proxy_teacher, {sex:" 男 "});// 设 置 对 象 原型 
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in 是 我 们 前 边 没有 专门 提 到 的 一 个 运算 符 ， 使 用 它 可 以 获取 对 象 中 是 否 包含 某 个 属性 。 








关于 使 用 Proxy 来 代理 目标 对 象 ， 有 一 点 需要 额外 注意 ，Proxy 对 象 方法 中 的 this 和 原 对 象 方 
法 中 的 this 并 不 一 致 ， 它 们 指向 的 是 两 个 不 同 的 对 象 。 例 如 : 


var student = { 





name:"Lucy", 
print:function(){ 
console.log (this===student); 

} 
} 
let proxy student = new Proxy(student, {}); 
student .print ();//true 
Proxy_student .print ();//false 


4.6 ”Promise 承诺 对 象 


Promise 为 JavaScript 异步 编程 提供 了 一 种 实现 思路 。 首 先 我 们 先 来 看 一 个 生活 中 的 小 例子 。 

在 日 常生 活 中 ， 人 们 总 是 需要 相互 帮助 的 ， 比 如 你 今天 工作 相当 忙 ， 由 于 前 几 天 的 放松 导致 领导 发 
闫 了 , 他 要 求 你 今天 下 班 前 必须 把 工作 结果 汇报 给 他 , 但 是 不 久 前 你 又 与 上 大 学 的 表 弟 约 好 了 今天 
要 把 几 本 教材 资料 给 他 送 去 。 领 导 要 求 的 自然 是 要 完成 的 , 但 是 说 好 的 事情 也 不 能 失 约 ， 于 是 你 决 
定 找 一 个 朋友 替 你 送 书 给 表 弟 , 你 依然 可 以 加 班 做 自己 的 工作 , 朋友 只 需要 在 任务 完成 后 把 结果 告 
诉 你 就 好 了 。 这 就 是 一 种 承诺 关系 ， 类 比 于 程序 中 是 这 样 一 种 关系 ， 即 将 任务 交 给 某 个 对 象 完成 ， 
这 个 对 象 完成 任务 后 再 将 结果 反馈 回来 。 当然 , 任务 有 可 能 执行 失败 , 比如 你 的 朋友 没有 找到 表 弟 。 
无 论 任务 执行 成 功 与 否 ， 执 行 任务 的 对 象 都 会 将 结果 反馈 回来 ， 我 们 暂 把 这 个 对 象 叫做 承诺 对 象 ， 
即 Promise 对 象 。 









4.6.1 Promise 对 象 执行 异步 任务 


通过 前 面 的 小 例子 你 应 该 可 以 体会 到 ，Promise 对 象 是 极 佳 的 异步 编程 方案 。 比 如 某 个 延 时 任 
务 ， 我 们 可 以 把 它 交 给 Promise 对 象 ， 这 样 既 不 会 阻塞 程序 的 正常 执行 ， 当 延 时 任务 执行 完成 后 又 
可 以 第 一 时 间 做 逻辑 处 理 。 示 例 代 码 如 下 : 

// 打 印 结果 

/* 

Oe 

任务 直接 完成 

el 

let promise = new Promise(function(resolve,reject){ 
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setTimeout (()=>{ 
console.1og(" 任 务 直接 完成 ") ; 
},3000); 
Ds; 
console.1log("go..."); 


使 用 Promise 构造 函数 来 进行 Promise 实例 对 象 的 创建 ,构造 函数 中 需要 传 入 一 个 函数 作为 参 
数 ， 这 个 参数 函数 比较 特殊 ， 它 有 两 个 参数 ， 分 别 用 来 触发 Promise 示例 对 象 的 任务 执行 完成 消息 
和 触发 Promise 示例 对 象 的 任务 执行 失败 消息 ， 后 面 我 们 会 具体 介绍 ， 参 数 函数 的 函数 体 即 是 
Promise 实例 对 象 需要 执行 的 任务 代码 。 从 上 面 打印 信息 可 以 看 出 ，Promise 实例 对 象 一 旦 被 创建 ， 
其 中 任务 会 自动 开始 执行 ， 上 面 代码 做 了 延 时 3 秒 的 打印 操作 ， 并 没有 阻塞 主 程序 代码 的 执行 。 
其 实 Promise 实例 对 象 有 3 种 状态 , 分 别 是 pending (执行 中 ) 、fulfilled (执行 完成 ) 、rejected 
(执行 失败 ) 。 这 3 种 状态 都 是 内 部 触发 的 ， 外 部 无 法 对 其 进行 操作 。 上 面 的 代码 我 们 并 没有 对 
Promise 任务 执行 完成 情况 进行 监听 , 在 实际 开发 中 ,一 般 不 仅 需 要 得 到 Promise 任务 执行 的 情况 ， 
甚至 还 需要 获取 到 任务 执行 完成 后 的 一 些 数据 。Promise 实例 对 象 的 then 方法 用 来 监听 执行 情况 并 
接收 传递 的 数据 。 请 看 如 下 代码 : 
// 打 印 结果 
/* 
gO 
任务 直接 完成 
Success 
于 尖 
let promise = new Promise(function(resolve,reject){ 
setTimeout (()=>{ 
console.1o0g ("任务 直接 完成 ") ; 
resolve ("Success"); 
},3000); 
]) 7 
Promise.then((success)=>{ 
console.log(success); 
}, (error)=>{ 
console.log (error); 
Py 
then 方法 中 可 以 传 入 两 个 参数 ， 第 1 个 参数 为 当 Promise 任务 执行 完成 时 回调 的 方法 , 第 2 个 
参数 为 当 Promise 任务 执行 失败 时 回调 的 方法 ， 第 2 个 参数 为 非 必需 的 。 仅 仅 对 Promise 的 执行 情 
况 进 行 监听 并 没有 意义 ， 我 们 还 需要 告诉 Promise 对 象 什么 情况 算 任务 执行 完成 ,什么 情况 又 算 任 
务 执行 失败 。 在 创建 Promise 对 象 时 ， 我 们 提 到 过 参数 函数 中 的 两 个 参数 : resolve 和 reject。 这 两 
个 参数 实际 上 也 是 函数 ， 我 们 只 需要 在 函数 体 合适 的 地 方 对 它们 进行 调用 即 可 ， 例 如 上 面 的 代码 ， 
调用 了 resolve， 这 时 Promise 示例 对 象 的 状态 便 被 置 为 已 完成 ， 之 后 会 执行 then 方法 监听 的 已 完 
成 情况 下 的 回调 函数 。 
除了 then 方法 ，Promise 实例 对 象 中 要 定义 一 个 catch 方法 ，catch 方法 和 then 方法 的 区 别 只 
在 于 catch 方法 只 有 一 个 参数 ， 其 是 Promise 执行 失败 后 回调 的 函数 ， 例 如 : 
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// 打 印 结果 
/* 
OSs 
任务 直接 完成 
SEEOF 
let Promise = new Promise(function(resolve,reject){ 
setTimeout (()=>{ 
console .1og ("任务 直接 完成 ") ; 
reject ("error"); 
},3000); 
]) 7 
Promise .catch ( (error)=>{ 
console.log (error); 


4.6.2 ”Promise 任务 链 


在 开发 中 还 经 常会 遇 到 这 样 的 场景 ， 任 务 B 的 执行 必须 依赖 于 任务 A， 即 只 有 当 任 务 A 成 功 
执行 后 才 可 以 执行 任务 B。 使 用 Promise 可 以 十 分 容易 地 实现 这 种 逻辑 ， 其 实 Promise 实例 对 象 的 
then 方法 中 可 以 返回 一 个 新 的 Promise 来 构成 任务 链 ， 示 例 代码 如 下 : 


// 打 印 结果 
/* 
+ 
任务 直接 完成 
success 
任务 2 执行 完成 
success2 
EX 
let Promise = new Promise(function(resolve, reject){ 
setTimeout (()=>{ 
console.1o0g ("任务 直接 完成 ") ; 
resolve ("success"); 
},3000); 
1D); 
promise.then((success)=>{ 
console.log(success); 
return new Promisel((resolve,reject)=>{ 
setTimeout (()=>{ 
console.1o0g ("任务 2 执行 完成 ") ; 
resolve ("success2"); 
},2000) 
Ds; 
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}，(error)=>{ 
console.1og(error) 7 

}) .then (success=>{ 
console.log(success); 

Ds 

console.log("go..."); 


使 用 这 种 任务 链 的 编程 模式 ， 我 们 可 以 很 轻松 地 处 理 多 任务 并 且 有 复杂 依赖 关系 的 场景 。 


4.6.3 ”Promise 对 象 组 合 


Promise 构造 函数 对 象 上 还 提供 了 两 个 非常 有 用 的 方法 ， 它 们 用 来 对 Promise 任务 进行 组 合 ， 
all 方法 用 来 组 合 一 组 Promise 实例 对 象 ， 当 组 中 所 有 的 Promise 任务 都 成 功 执行 完成 后 ，Promise 
任务 组 才 算 成 功 执行 ， 如 果 其 中 有 一 个 任务 执行 失败 ， 则 任务 组 执行 失败 ， 例 如 : 


let Promisel = new Promise((resolve,reject)=>{ 
console.1og(" 任 务 1 执行 成 功 ") 7 
resolve () 

]) 7 

let Promise2 = new Promise((resolve,reject)=>{ 
console.1o0g ("任务 2 执行 成 功 ") ; 
resolve(); 

]) 7 

let Promise3 = new Promise((resolve,reject)=>{ 
console.1og ("任务 3 执行 成 功 ") ; 
resolve(); 

I 

let promiseGroup = Promise.all([promisel,promise2,promise3]); 

/* 

任务 1 执行 成 功 

任务 2 执行 成 功 

任务 3 执行 成 功 

任务 组 执行 成 功 

ad 

PromiseGroup .then (success=>{ 
console.1og(" 任 务 组 执行 成 功 ") ; 

},error=>{ 
console.1og ("任务 组 执行 失败 ") ; 

Ds; 


如 果 我 们 将 任务 组 中 的 一 个 单独 任务 修改 为 执行 失败 ， 则 结果 会 完全 不 同 ， 代 码 如 下 : 


let Promisel = new Promisel( (resolve,reject)=>{ 
console.1og ("任务 1 执行 成 功 ") ; 
Fresolve () 7 

1 
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let Promise2 = new Promise((resolve,reject)=>{ 
console.1og ("任务 2 执行 失败 ") ; 
reject (); 

Ds; 

let promise3 = new Promisel( (resolve,reject)=>{ 
console.1og ("任务 3 执行 成 功 ") ; 
resolve(); 

Ds; 

let promiseGroup = Promise.all([promisel,promise2,promise3]); 

/* 

任务 1 执行 成 功 

任务 2 执行 失败 

任务 3 执行 成 功 

任务 组 执行 失败 

ei 


PromiseGroup .then (success=>{ 


console.1og(" 任 务 组 执行 成 功 ") ; 


} verror=>1{ 


1D); 


console.1og ("任务 组 执行 失败 ") ; 


与 all 方法 对 应 的 还 有 一 个 race 方法 , 这 个 方法 也 是 组 合 一 组 Promise 实例 对 象 ,不 同 的 是 race 


方法 组 合 


的 任务 组 中 只 要 有 一 个 任务 执行 完成 , 任务 组 就 算 执 行 完 成 , 任务 组 的 成 功 或 失败 只 与 第 


一 个 完成 的 任务 有 关 ， 第 一 个 完成 任务 的 Promise 对 象 状态 如 果 为 成 功 ， 则 任务 组 的 状态 为 成 功 ， 
此 对 象 的 状态 为 失败 ， 则 任务 组 的 状态 为 失败 。 例 如 : 


let 


Ds; 
let 


Ds; 
let 


Ds; 


Promisel = new Promise((resolve,reject)=>{ 
// 加 延 时 
setTimeout (()=>{ 
console.1o0g ("任务 1 执行 成 功 ") ; 
resolve () 
},1000); 


Promise2 = new Promisel((resolve,reject)=>{ 
// 加 延 时 
setTimeout (()=>{ 
console.1log(" 任 务 2 执行 成 功 ") ; 
resolve () 
},1000); 


Promise3 = new Promisel((resolve,reject)=>{ 
console.1og ("任务 3 执行 失败 ") ; 


reject (); 
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let promiseGroup = Promise.race([promisel,promise2,promise3]); 
天 3 
任务 3 执行 失败 
任务 组 执行 失败 
任务 1 执行 成 功 
任务 2 执行 成 功 
A 
PromiseGroup .then (success=>{ 
console.1og(" 任 务 组 执行 成 功 ") ; 
},error=>{ 
console.1og ("任务 组 执行 失败 ") ; 
i 


Promise 构造 函数 对 象 的 all 方法 返回 的 任务 组 ， 实 际 上 其 成 功 失败 取决 于 其 中 每 一 个 任务 


的 执行 。 Promise 构造 函数 对 象 的 race 方法 返回 的 任务 组 ， 其 成 功 失败 只 与 第 一 个 执行 完 的 
任务 有 关 ， 这 样 对 比 可 以 便于 记忆 。 





4.7 ”Generator 生成 器 与 yield 语句 


你 已 经 掌握 了 Promise 对 象 的 应 用 ,相信 对 编程 中 的 异步 处 理 任务 有 了 更 深入 的 理解 。 本 节 将 
向 你 介绍 一 种 ES6 中 强大 的 任务 执行 控制 方案 : Generator 生成 器 对 象 。 

从 字面 上 理解 ，Generator 是 一 种 生成 器 对 象 ， 这 种 理解 并 不 确切 但 也 不 错误 。 一 种 更 加 面向 
应 用 的 理解 为 Generator 是 一 个 状态 机 ， 其 内 部 封装 了 多 种 状态 ， 通 过 yield 语句 进行 隔离 。 使 用 
Generator 函数 ， 分 步 处 理 任 务 将 更 加 容易 。 


4.7.1 Generator 函数 应 用 


下 面 是 一 个 简单 的 Generator 函数 例子 : 


function* generatorFunc(){ 
console.1og ("任务 一 ")， 


yield; 

console.1o0g ("任务 二 ")， 
yield; 

console.10g ("任务 三 ")，; 
return; 


1 

let g = generatorFunc () 7 
let tl = g.next ();// 任 务 一 
let t2 = g.next();// 任 务 二 
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let t3 = g.next();// 任 务 三 

let t4 = g.next(); 

console.log(t1);//{ value: undefined, done: false } 
console.log(t2);//{ value: undefined, done: false } 
console.log(t3);//{ value: undefined, done: true } 
console.log(t4);//{ value: undefined, done: true } 


我 们 先 来 看 Generator 函数 的 语法 ， 其 和 普通 函数 十 分 相似 ， 不 同 的 是 其 在 function 关键 字 后 
追加 一 个 星 号 表示 它 是 一 个 Generator 函数 。Generator 函数 内 部 可 以 编写 一 些 逻 辑 代 码 ， 和 普通 函 
数 不 同 ， 除 了 可 以 使 用 return 关键 字 来 返回 外 还 可 以 使 用 yeild 关键 字 来 中 断 〈( 普 通 函 数 中 不 可 以 
使 用 yield 关键 字 ),Generator 函数 的 调用 和 普通 函数 一 样 ,但 是 有 一 点 需要 特别 注意 ,调用 Generator 
函数 并 非 执行 函数 体 的 内 容 ， 而 是 返回 一 个 迭代 器 对 象 ， 通 过 这 个 迭代 器 对 象 的 next 指针 来 分 步 
执行 Generator 函数 体 中 的 任务 。 

以 上 面 的 代码 为 例 , g 为 调用 Generator 函数 返回 的 迭代 器 对 象 , 当 进 代 器 对 象 第 一 次 调用 next 
方法 时 ， 其 会 执行 Generator 函数 体 的 代码 ， 直 到 遇 到 yield 语句 处 中 断 。 第 2 次 再 调用 next 方法 
时 ，Generator 函数 体 中 的 任务 会 从 上 次 中 断 的 地 方 开始 继续 执行 ， 直 到 再 次 遇 到 yield 中 断 或 者 
retum 返回 。 当 然 ， 调 用 next 函数 时 本 身 也 会 有 一 个 返回 值 ， 这 个 返回 值 是 一 个 对 象 ， 其 中 的 done 
属性 如 果 为 false， 代 表 Generator 函数 体 的 任务 还 没有 执行 完成 ， 可 以 继续 调用 next 往 后 执行 ， 如 
果 done 属性 为 true, 则 表示 Generator 函数 体 的 任务 已 经 完全 执行 完成 , 之 后 再 次 调用 next 方法 将 
不 会 有 效果 。 从 上 面 代码 的 打印 结果 你 也 可 以 看 到 ，next 函数 返回 的 对 象 中 还 有 一 个 value 属性 ， 
这 个 属性 用 于 接收 Generator 函数 体 任务 执行 中 使 用 yield 或 者 return 返回 的 数据 ， 例 如 : 

function* generatorFunc(){ 

console.1og ("任务 一 "); 
yield 1; 

console.1o0g ("任务 二 ")，; 
yield 2; 

console.10g ("任务 三 "); 
return 3; 








let g = generatorFunc(); 


let tl = g.next();// 任 务 一 
let t2 = g.next();// 任 务 二 
let t3 = g.next();// 任 务 三 


let t4 = g.next (); 

console.log(t1);//{ value: 1, done: false } 
console.log(t2);//{ value: 2, done: false } 
console.log(t3);//{ value: 3, done: true } 
console.log(t4);//{ value: undefined, done: true } 


再 来 看 一 种 特殊 的 情况 ， 如 果 我 们 要 在 一 个 Generator 函数 任务 中 执行 另 一 个 Generator 函数 
任务 ， 该 如 何 来 做 昵 ， 请 看 如 下 代码 : 


function* generatorSubFunc(){ 
console.1log(" 子 任务 一 ") ; 
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yield; 
console.1og(" 子 任务 二 ")，; 
return; 

} 

function* generatorFunc(){ 
console.1o0g ("任务 一 "); 
yield 1; 
console.1og ("任务 二 "); 
let sub = generatorSubFunc(); 
sub.next (); 
sub.next (); 
yield 2; 
console.1og ("任务 三 "); 
return 3; 


let g = generatorFunc(); 


let tl = g.next();// 任 务 一 
let t2 = g.next();// 任 务 二 子 任务 一 子 任务 二 
let t3 = g.next();// 任 务 三 


上 面 的 示例 代码 提供 了 一 种 解决 方案 ,但 是 代码 结构 并 不 优美 ，ES6 中 提供 了 yield* 语 句 来 直 
接 在 Generator 函数 体内 部 执行 另 一 个 Generator 函数 体 任务 ， 修 改 上 面 的 代码 如 下 : 


function* generatorSubFunc (){ 
console.1og(" 子 任务 一 ") ; 
yield; 
console.10g(" 子 任务 二 ")， 
return; 

} 

function* generatorFunc(){ 
console.1og ("任务 一 "); 
yield 1; 
console.1og ("任务 二 "); 
yield* generatorSubFunc(); 
console.1og ("任务 三 "); 
return 3; 


let g = generatorFunc () 7 

let tl = g.next();// 任 务 一 

let t2 = g.next();//Y 任 务 三 子 任务 一 了 任务 三 
let t3 = g.next();// 任 务 三 


外 


4.7.2 ”Generator 任务 参数 的 传递 


你 知道 通过 yield 或 return 语句 可 以 得 到 Generator 函数 每 一 步 任务 的 返回 值 , 但 是 函数 有 三 要 
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素 : 定义 域 、 值 域 、 表 达 式 。 对 应 于 编程 ， 其 实 就 是 参数 、 返 回 值 、 函 数 体 。 比 如 我 们 要 实现 这 样 
的 功能 的 Generator 函数 : 第 一 个 任务 先 传 入 两 个 参数 ， 计 算 其 和 ， 然 后 输出 结果 ; 第 二 个 任务 是 
计算 上 一 步 结果 的 平方 , 再 次 输出 ; 最 后 一 个 任务 是 传 入 一 个 参数 , 计算 上 一 步 结果 与 传 入 参数 的 
差 ， 再 输出 。 其 实 我 们 在 调用 next 方法 的 时 候 可 以 传递 参数 ， 配 合 yield 语句 来 接收 传递 的 参数 ， 
示例 如 下 : 
function* cal()1{ 

console.1og(" 可 以 开始 计算 ") ; 

let a = yield; 

console.1og ("接收 参数 a",a); 

let b = yield; 

console.1og ("接收 参数 b",b) ; 

let res = af+b7 








yield res; 
res = res*res; 
let d = yield res; 
console .1o0g ("接收 参数 d",d) ; 
res = res - d; 
return res; 
} 
let c = call(); 
c.next(); 
Cnext(S)s 
console.log(c.next (3));//{ value: 8, done: false } 
console.log(c.next());//{ value: 64, done: false } 
console.log(c.next (10));//{ value: 54, done: true } 


如 上 代码 所 示 ， 当 调用 next 函数 的 时 候 ， 我 们 可 以 传 入 一 个 参数 ， 此 参数 会 作为 上 一 个 任务 
yield 表达 式 的 值 。 切 记 ， 传 入 的 参数 会 作为 上 一 次 任务 的 yield 表达 式 的 值 ， 而 不 是 本 次 任务 yield 
表达 式 的 值 。 也 就 是 说 ， 第 一 次 调用 next 方法 时 实际 上 是 不 能 传 入 参数 的 。 


当 Generator 函数 作为 对 象 的 属性 时 ， 往 往 可 以 简写 ， 如 下 面 的 代码 所 示 : 


var obj = { 
gFuncl:function* (){ 
MAREE 
}, 
* grFunc2(){ 
Hs 
} 
} 


obj 对 象 中 的 gFuncl 与 gFunc2 都 是 Generator 函数 。 
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4.8 使 用 class 定义 类 


JavaScript 是 一 种 面向 对 象 的 语言 ， 但 是 它 并 不 是 基于 类 的 。 通 过 前 面 的 学 习 ， 你 已 经 掌握 了 
在 JavaScript 模拟 类 的 方式 ， 尽 管 我 们 可 以 通过 对 象 冒 充 或 者 原型 链 的 方式 来 实现 类 的 功能 ， 但 这 
种 定义 类 的 方式 与 传统 面向 对 象 的 语言 有 很 大 的 不 同 ，ES6 中 新 引入 了 Class 关键 字 ， 使 用 它 定义 
类 将 更 加 容易 、 更 加 规范 。 


4.8.1 使 用 class 定义 类 


先 来 回顾 一 下 ， 使 用 构造 函数 来 定义 类 的 方式 : 


function Teacher (name,age){ 





this .name = name; 
this.age = age; 
this.teaching = ()=>{ 
console.log (this.name,this.age); 
} 
let teacher = new Teacher ("Jaki",25); 
teacher.teaching();//Jaki 25 


ES6 的 class 关键 字 定义 了 一 种 类 模板 ， 使 用 class 关键 字 来 改写 上 面 的 Teacher 类 : 


class Teacher1{ 
constructor (name,age){ 
this.name = name; 
this.age = age; 
} 
teaching(){ 
console.log (this.name,this.age); 
} 
} 
let teacher = new Teacher ("Jaki",25); 
teacher.teaching();//Jaki 25 


下 面 我 们 来 解释 一 下 class 关键 字 的 用 法 。 首先 class 关键 字 用 于 定义 一 个 类 , 在 代码 块 内 需要 
提供 一 个 constructor 方法 作为 类 的 构造 方法 ， 也 就 是 说 ， 当 使 用 new 关键 字 加 类 名 来 创建 实例 化 
对 象 时 , 系统 会 调用 constructor 方法 。 除了 constructor 方法 外 , 还 可 以 在 类 中 添加 其 他 自 定义 方法 ， 
这 些 方法 默认 都 会 放 入 实例 对 象 的 原型 对 象 中 ， 换 句 话说 ， 这 些 方 法 是 所 有 实例 对 象 所 共享 的 。 
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不 一 定 非 要 显 式 地 实现 constructor 方法 ， 如 果 不 实 现 ， 那 么 系统 会 自动 提供 一 个 空 的 
constructor 方法 作为 构造 函数 。 





4.8.2 class 类 的 继承 


使 用 class 关键 字 定 义 类 的 另 一 个 方便 之 处 在 于 继承 对 其 来 说 十 分 容易 。 我 们 不 需要 再 手动 对 
原型 链 进行 操作 。 例 如 : 


class Peoplet 
constructor (name,age){ 
this.name = name; 
this.age = age; 
} 
} 
class Teacher extends People{ 
constructor (name,age, subject){ 
super (name,age); 
this.subject = subject; 
} 
teaching(){ 
console.log (this.name,this.age,this.subject); 
} 
} 


let teacher = new Teacher ("Jaki",25,"JavaScript"); 

teacher.teaching();//Jaki 25 JavaScript 

class 的 继承 采用 extends 关键 字 ， 需 要 注意 ， 如 果 你 使 用 了 继承 ， 那 么 在 constructor 构造 方法 
中 必须 先 调用 父 类 的 构造 方法 ， 即 使 用 super 关键 字 来 调用 。super 关键 字 既 可 以 当 函 数 来 使 用 ， 
也 可 以 当 父 类 对 象 的 原型 对 象 来 使 用 。 如 果 在 子 类 的 构造 方法 中 使 用 super()， 则 它 表示 调用 父 类 
的 构造 方法 ， 如 果 使 用 super.method 的 方式 来 调用 父 类 的 方法 ， 则 表示 的 是 父 类 对 象 的 原型 对 象 ， 
例如 : 

class Peoplet{ 

constructor (name,age){ 





this.name = name; 
this.age = age; 
} 
sayHi (){ 
console.log("sayHi"); 
} 
} 
class Teacher extends People{ 
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constructor (name,age, subject){ 
super (name,age); 
this.subject = subject; 
super.sayHi (); 
} 
teaching(){ 
console.log (this.name,this.age,this.subject); 
} 
let teacher = new Teacher ("Jaki",25,"JavaScript");//sayHi 
teacher.teaching();//Jaki 25 JavaScript 


使 用 class 定义 类 可 以 实现 的 功能 在 ES5 中 基本 也 都 可 以 实现 ， 其 实 ，ES6 中 class 这 种 语 


法 只 是 引入 了 一 种 更 加 直观 可 读 、 更 加 规范 的 定义 类 的 语法 层面 的 实现 ， 其 实质 依然 是 原 
型 链 。 





4.9 ”模块 引入 


在 JavaScript 中 ， 一 直 都 缺少 一 种 模块 引入 的 语法 ， 这 使 大 项 目的 拆 分 变 得 十 分 困难 。ES6 中 
引入 了 模块 化 的 设计 思想 ， 通 过 export 关键 字 可 以 将 一 个 文件 内 的 对 象 导 出 ， 在 另 一 个 文件 中 使 
用 import 可 以 实现 其 他 文件 中 对 象 的 导入 。 由 于 我 们 使 用 Sublime Text 编辑 器 的 JavaScript 解释 环 
境 并 不 能 支持 export 和 import 模块 编程 ， 因 此 本 节 我 们 只 做 语法 的 演示 ， 后 面 的 实战 中 会 将 这 种 
语法 语句 使 用 起 来 。 





4.9.1 ”export 关键 字 


ES6 中 的 模块 化 编程 主要 是 通过 export 和 import 两 个 关键 字 实 现 。export 用 于 规定 当前 文件 
对 外 提供 的 接口 ，import 则 是 引入 这 些 功 能 接口 。 

例如 ， 我 们 创建 一 个 命名 为 module.js 的 文件 ， 如 果 我 们 要 将 其 作为 配置 文件 向 外 界 提供 一 些 
用 户 配置 信息 的 接口 ， 就 可 以 这 么 做 : 

export var userName = "Jaki"; 

export var password = "123456"; 


上 面 的 示例 代码 在 变量 的 声明 前 添加 了 export 关键 字 , 其 向 外 部 输出 了 userName 和 password 
两 个 变量 。 当 然 你 也 可 以 选择 一 次 性 导出 多 个 变量 ， 例 如 : 
Var scrool = "No.1"; 


Var theClass = "No.2"; 
export {scrool,theClass}; 
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除了 可 以 将 变量 作为 导出 的 对 象 ， 也 可 以 导出 函数 或 者 类 ， 例 如 : 
export function(){ 
console.log("Hello World"); 
1 
export class Teacher{ 
constructor (name,age){ 
this.name = name; 
this.age = age; 


默认 情况 下 ， 导 出 的 对 象 在 外 界 的 名 称 就 是 对 象 原始 的 名 称 ， 你 也 可 以 对 导出 对 象 的 名 称 使 
用 as 进行 自 定义 ， 例 如 : 
Var jaki = "Jaki"; 


Var lucy = "Lucy"; 
export {jaki as Peoplel,1lucy as people2}; 


对 于 上 面 的 示例 代码 ， 外 界 在 使 用 jaki 和 lucy 变量 时 ， 需 要 使 用 peoplel 与 people2 。 


4.9.2 import 关键 字 


import 关键 字 和 export 关键 字 对 应 ， 用 于 引入 export 关键 字 所 导出 的 对 象 。 我 们 再 创建 一 个 
名 为 main.js 的 文件 ， 比 如 要 导入 modulejs 中 的 userName 和 password 变量 ， 就 可 以 这 么 做 : 

import {userName,password} from "./module.js"; 

console.log (userName,password); 

import 后 面 的 大 括号 中 需要 指定 要 引入 模块 中 导出 的 对 象 ，from 关键 字 后 面 需要 指定 模块 文 
件 的 路 径 。 同 样 ， 在 引入 文件 时 ， 也 可 以 为 引入 的 对 象 起 一 个 新 的 名 字 ， 例 如 : 

import {userName as name,password as word} from "./module.js"; 

console.log (name,word); 

improt 还 提供 了 一 种 语法 ， 其 可 以 将 外 部 模块 中 所 有 导出 的 对 象 一 起 引入 进来 并 且 绑 定 到 指 
定 的 对 象 上 ， 例 如 : 


import * as module from "module.js"; 
console.1og (module.userName,module.password); 


4.9.3 ”默认 导出 与 导入 


很 多 时 候 ， 一 个 外 部 的 模块 往往 只 需要 向 外 提供 唯一 的 一 个 接口 。 例 如 通常 将 一 个 独立 的 类 
写成 一 个 单独 的 文件 ,那么 只 暴露 这 个 类 本 身 作为 接口 就 可 以 了 。 因此，ES6 的 导出 与 导入 还 提供 
了 default 默认 项 设置 。 例 如 ， 在 module.js 文件 中 编写 如 下 代码 : 
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export default class People(){ 
constructor (){ 
} 

1 


上 面 代码 的 意思 是 将 People 类 作为 module.js 文件 的 默认 导出 对 象 。 在 mainjs 中 可 以 使 用 如 
下 代码 进行 导入 : 

import myModule from "module.js"; 

上 面 的 示例 代码 有 两 点 需要 注意 ， 首 先 myModule 是 自 定义 的 名 称 ， 代 表 modulejs 文件 中 默 
认 导 出 的 对 象 ， 即 People 类 。 还 有 一 点 需要 特别 注意 ， 这 种 当时 引入 的 对 象 是 不 需要 写 在 大 括号 
内 的 。 默 认 对 象 和 非 默认 对 象 也 是 可 以 同时 引入 的 ， 它 们 并 不 会 相互 影响 ， 例 如 : 


import myModule, {userName} from "module.js"; 


React Native 开发 环境 的 搭建 


React Native 是 由 Facebook 公司 开源 的 一 套 跨 平台 的 移动 端 开发 框架 。React Native 能 够 使 你 
用 JavaScript 开发 出 一 流体 验 的 移动 原生 应 用 。 虽 然 目前 市 场 上 纯 React Native 的 应 用 数量 还 十 分 
有 限 ， 但 是 一 套 代 码 跨 平台 使 用 的 特点 以 及 Facebook 将 持续 不 断 地 投入 React Native 建设 都 将 使 
其 前 景 十 分 美好 。 

React Native 开发 的 原生 项 目 可 以 同时 支持 iOS 与 Android 双 平台 。 由 于 iOS 开发 工具 Xcode 
软件 和 模拟 器 都 只 能 运行 在 macOS 系统 上 ， 因 此 本 书 也 采用 macOS 系统 来 做 演示 。 


5.1 iOS 开发 环境 的 搭建 


Xcode 开发 工具 是 最 全 面 、 最 强大 、 集 成 工具 最 完善 的 一 款 iOS 软件 开发 工具 。 除 了 可 以 开 
发 iOS 应 用 外 ， 还 可 以 开发 macOS、watchOS、tvOS 平台 的 软件 。Xcode 工具 是 Apple 自家 开发 
的 工具 ， 因 此 其 下 载 安装 也 十 分 方便 ， 直 接 使 用 AppStore 软件 即 可 完成 下 载 与 安装 。 


5.1.1 申请 ApplelD 账号 


从 AppStore 下 载 软件 都 需要 使 用 AppleID 先 登 录 。 本 小 节 简 单 介 绍 如 何 申请 AppleID 账号 ， 
如 果 你 已 经 拥有 账号 ， 完 全 可 以 跳 过 此 章节 向 后 学 习 。 

首先 登录 https://appleid.apple.com 网 站 来 到 AppleID 管理 页 面 , 单 击 右上 方 的 “创建 您 的 Apple 
ID” 选 项 ， 如 图 5-1 所 示 。 

之 后 会 跳 转 到 AppleID 创建 界面 ， 根 据 提示 填写 完整 信息 后 完成 注册 即 可 。 需 要 注意 ， 填 写 
的 邮箱 地 址 要 务必 真实 有 效 , 需要 邮箱 验证 才能 注册 成 功 . 还 有 一 点 , 安全 提示 问题 及 答案 要 也 牢 
记 ， 万 一 有 一 天 忘记 了 自己 的 AppleID 密码 ， 这 些 可 以 帮助 你 将 其 找 回 ， 如 图 5-2 所 示 。 
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图 5-1 创建 AppleID 账号 











图 5-2 填写 申请 AppleID 的 基本 信息 


5.1.2 ”安装 Xcode 开发 工具 


打开 AppStore 软件 ， 在 其 搜索 栏 中 输入 Xcode 关键 字 按 回 车 键 进行 搜索 ， 如 图 5-3 所 示 。 





EDITORS' cHolcE 














图 5-3 在 AppStore 中 进行 软件 搜索 
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搜索 结果 中 的 第 一 个 软件 就 是 Xcode 开发 工具 ， 单 击 获取 即 可 进行 下 载 安 装 ， 其 间 可 能 会 弹 
出 需要 输入 AppleID 账号 密码 的 菜单 ， 正 确 填写 即 可 。 注 意 ， 如 果 你 已 经 安装 过 Xcode 工具 ， 则 
这 里 显示 的 是 打开 而 不 是 获取 ， 如 图 5-4 所 示 。 














5-4 安装 Xcode 开发 工具 


5.2 Android 开发 环境 的 搭建 


以 前 国内 的 开发 者 若 想 直接 下 载 Android Studio 开发 工具 并 不 容易 ， 现 在 Google 专门 为 中 国 
开发 者 提供 了 资源 网 站 , 无 论 是 下 载 工具 还 是 获取 最 新 的 Android 开发 资讯 , 都 比 以 前 容易 了 许多 。 


5.2.1 下 载 Android Studio 开发 工具 





首先 登录 Google 中 国 开发 者 网 站 ， 网 址 是 https://developers.google.cn/。 单 击 其 中 的 Android 
按钮 ， 如 图 5-5 所 示 。 


4 Google Developers 

















Google /0 2017 
Moy 17 19 Nountan View 


2 ee | 
图 5-5 Google 中 国 开发 者 网 站 


在 弹出 的 窗口 中 选择 “下 载 Android Studio 和 SDK 工具 选项 ”， 如 图 5-6 所 示 。 
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面向 开发 者 的 材料 设计 下 载 Android Studio 和 SDK 工具 


PREvEw 











图 5-6 ”Android 开发 者 页 面 
在 弹出 的 窗口 中 选择 “下 载 ANDROID STUDIO”， 完 成 下 载 即 可 ， 如 图 5-7 所 示 。 








返回 到 开发 者 主页 


下 Android Studio 
Se 官方 Android IDE 


用 记者 者 


PREview 





》 阅读 文档 











5-7 下 载 Android Studio 开发 工具 


5.2.2 ”安装 相关 SDK 和 模拟 器 


下 载 安装 完 Android Studio 后 ， 你 还 需要 安装 相关 SDK 和 
模拟 器 ， 打 开 Android Studio 开发 工具 ， 在 欢迎 界面 中 单 击 
Configure， 选 择 其 中 的 SDK Manager， 如 图 5-8 所 示 。 

在 弹出 窗口 中 选择 Android SDK, 在 SDK Platforms 选项 卡 
中 勾 选 一 个 Android SDK 版 本 进行 安装 即 可 , 如 图 5-9 所 示 (图 
中 安装 了 Android 6.0 与 Android 4.4 两 个 版 本 ) 。 

然后 在 SDK Tools 选项 卡 下 选择 Android SDK Tools 23.0.1 

(必须 是 这 个 版 本 ) 和 Android Support Repository 进行 安装 。 注 
意 ， 要 选择 SDK Tools 的 版 本 ， 需 要 勾 选 Show Package Details 
选项 。 5-8 ”进行 SDK 下 载 与 安装 





128 | React Native 全 教程 : 移动 端 跨 平 台 应 用 开发 





图 5-9 选择 Android SDK 进行 安装 


Android 模拟 器 的 安装 也 十 分 简单 , 先 随便 新 建 一 个 Android 工程 , 之 后 在 菜单 栏 中 找到 Tools 
一 Android 一 AVD Manager 选项 ， 如 图 5-10 所 示 。 
VCS Window Help 
Tasks & Contexts 


Save File as Template... 
Generate JavaDoc... 


New Scratch File... ORN 
IDE Scripting Console 


Create Command-line Launcher... 
” Firebase 


3 App Links Assistant 


Android Sync Project with Gradle Files 
Android Device Monitor 


LAVD Manager 


Firebase App Indexing Test 
图 5-10 打开 Android 模拟 器 管理 器 


弹出 的 列表 中 为 当前 已 有 的 模拟 器 ， 如 果 没 有 ， 单 击 Create Virtual Device... 选 项 创建 一 个 ， 
如 图 5-11 所 示 。 

在 弹出 的 窗口 中 选择 设备 类 型 ， 如 图 5-12 所 示 。 

选择 完 设 备 类 型 后 ， 单 击 Next 按钮 进入 下 一 步 ， 还 需要 为 模拟 器 选择 一 个 系统 (如 果 还 没有 
模拟 器 系统 ， 单 击 Download 下 载 一 个 即 可 ) ， 如 图 5-13 所 示 。 

选择 完 系统 后 单 击 Next 按钮 进入 下 一 步 ， 还 需要 我 们 进行 模拟 器 的 相关 配置 ， 一 般 不 需要 修 
改 ， 直 接 单 击 Finish 按钮 完成 模拟 器 的 创建 即 可 。 
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Android Virtual Device Manager 





Your Virtual Devices 
Android Studio 


图 5-11 创建 Android 模拟 器 
Virtual Device Configuration 






) Select Hardware 


Choose a device definition 


480x800 





图 5-12 选择 Android 模拟 器 设备 类 型 











现在 Android 开发 环境 的 配置 还 差 最 后 一 步 ， 需 


Android SDK 路 径 ， 在 终端 输入 如 下 命令 : 





vi ~/.bash profile 
在 打开 的 文件 中 输入 下 面 两 行内 容 : 


export PATH=$PATH:$ANDROID HOME/tools:$ANDROID HOME/platform-tools 








export ANDROID HOME=~/Library/Android/sdk 


要 将 ANDROID_HOME 环境 变量 正确 地 指向 
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证 E Virtual Device Configuration 





图 5-13 选择 模拟 器 系统 


之 后 进行 保存 即 可 。 


bash_profile 文件 可 能 会 不 存在 ，vi 命令 会 新 建 一 个 文件 ， 写 入 内 容 后 ， 按 Esc 键 ， 之 后 使 
用 “shift+: ”进入 命令 模式 ， 输 入 wq 后 回 车 保存 即 可 。 





5.3 ”React Native 开发 环境 配置 


经 过 前 面 的 步骤 , 终于 将 iOS 开发 环境 和 Android 开发 环境 搭建 完成 , 其 实 你 现在 已 经 可 以 独 
立地 在 各 个 平台 上 开发 各 自 的 软件 ， 但 这 并 不 是 我 们 本 书 的 目的 ， 下 面 就 来 安装 React Native 相关 
[ 具 。 


5.3.1 安装 React Native 构建 环境 


构建 React Native 工程 ， 首 先 需要 安装 Nodejs 环境 ， 其 实 前 面 我 们 在 使 用 Sublime Text 工具 
运行 JavaScript 代码 时 ， 就 已 经 使 用 到 了 Node.js， 如 果 此 时 你 还 没有 安装 Node.js， 那 么 你 需要 所 
到 第 1 章 ， 先 将 准备 工作 完成 。 

我 们 还 需要 安装 React Native 的 命令 行 工 具 : react-native-cli。 在 终端 输入 如 下 命令 : 

















npm install -g react-native-cli 
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安装 完成 后 可 以 使 用 如 下 命令 来 查看 React Native 的 版 本 , 如 果 查 看 到 版 本 , 就 说 明 安装 成 功 。 


react-native -v 


5.3.2 ”运行 你 的 第 一 个 React Native 应 用 


下 面 让 我 们 一 起 来 搭建 一 个 React Native 版 本 的 HelloWorld 应 用 。 在 终端 执行 如 下 命令 进行 
React Native 工程 的 初始 化 : 


react-native init HelloWorld 


这 个 命令 init 后 面 的 参数 用 来 设置 工程 名 称 , 这 里 取 名 为 HelloWorld。 这 个 命令 是 一 个 集成 命 
令 ， 其 会 完成 项 目的 创建 以 及 依赖 包 的 下 载 安 装 ， 因 此 会 需要 一 定时 间 ， 你 一 定 要 有 足够 的 耐心 。 
安装 完成 后 ， 进 入 React Native 工程 目录 ， 使 用 react-native run-ios 或 者 react-native run-Android 即 
可 在 模拟 器 上 运行 iOS 或 者 Android 项 目 。 如 果 你 的 iOS 或 者 Android 模拟 器 显示 如 图 5-14 或 图 
5-15 所 示 的 界面 ， 那 么 恭喜 你 ， 你 的 第 1 个 React Native 应 用 已 经 成 功 运行 起 来 了 。 





Welcome to React Nativel 


To 





图 5-14 ”iOS 模拟 器 图 5-15 安 卓 模拟 器 
在 运行 iOS 工程 时 会 启动 Xcode 默认 的 模拟 器 ， 使 用 如 下 命令 可 以 对 要 启动 的 模拟 器 进行 





选择 : _tests_ > 
react-native run-ios --simulator "iPhone SE" eharolg 
app.json 
上 面 命令 的 “iPhone SE” 为 iOS 模拟 器 的 名 称 ， 在 终端 ”| 别 index.android.js 
使 用 如 下 命令 可 以 查看 所 有 支持 的 模拟 器 名 列表 : a 
xcrun simctl list devices node_modules p 


package.json 


在 运行 Android 工程 时 , 则 会 自动 运行 在 所 开启 的 模拟 器 
上 ， 如 果 有 使 用 数据 线 连 接 真 机 ， 则 会 运行 在 真 机 上 。 
打开 HelloWorld 工程 目录 ， 项 目 结构 如 图 5-16 所 示 。 图 5-16 React Native 工程 结构 
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在 React Native 工程 结构 中 , node_modules 目录 中 为 所 有 的 依赖 包 , 我 们 不 需要 关心 。Android 
文件 夹 是 Android 的 项 目 目录 ，ios 文件 夹 是 iOS 项 目 目录 。index.iosjs 文件 和 index.Androidjs 文 
件 分 别 是 iOS 项 目的 入 口 文件 与 Android 项 目的 入 口 文件 .打开 index.ios.js 文件 和 index.Android.js 
文件 ， 将 其 中 的 代码 修改 成 如 下 所 示 : 


import React, { Component } from 'react'; 
import { 
AppRegistry, 
StyleSheet, 
Text, 
View 
} from 'react-native'; 
export default class HelloWorld extends Component { 
render() { 
return ( 
<Text style={{ 
Flexs1r 
top:100, 
left:100, 
fontSize:30 
}}>HelloWorld</Text> 
); 


} 
AppRegistry.registerComponent ('HelloWorld', () => HelloWorld); 


刷新 iOS 模拟 器 和 Android 模拟 器 , 效果 分 别 如 图 5-17 与 图 5-18 所 示 , 你 的 HelloWorld 项 目 
完成 了 ! 














HelloWorld 
HelloWorld 
图 5-17 iOS 模拟 器 图 5-18 ”Android 模拟 器 
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至 此 ， 搭 建 一 个 完整 的 React Native 工程 算是 告 一 段落 了 。 关 于 index.iosjs 与 index.Androidjs 
文件 中 代码 的 意义 ， 我 们 先 不 做 过 多 解释 ， 后 面 会 具体 讲解 。 由 于 React Native 工程 运行 在 iOS 模 
拟 器 与 Android 模拟 器 上 的 效果 类 似 , 在 后 面 的 学 习 过 程 中 , 我 们 就 只 给 出 iOS 模拟 器 的 效果 图 作 
为 展示 。 每 次 新 建 React Native 项 目 时 ， 都 需要 经 过 本 章 所 讲解 的 初始 化 步骤 ， 初 始 化 过 程 是 一 个 
非常 耗 时 的 操作 , 因此 后 面 在 学 习 React Native 开发 基础 时 , 我 们 会 一 直 使 用 这 个 HelloWorld 工程 
作为 模板 , 创建 不 同 的 JavaScript 文件 来 泻 染 界面 。 最 后 你 可 以 随意 修改 一 下 index 文件 中 的 代码 ， 
观察 效果 。 


React Native 独立 组 件 基 础 篇 


本 章 我 们 将 介绍 React Native 中 定义 的 独立 开发 组 件 。 开 发 一 款 完 整 的 应 用 其 实 就 是 使 用 各 种 
逻辑 将 各 个 独立 的 组 件 进行 连接 与 组 合 ， 如 果 你 在 本 章 的 学 习 中 熟练 掌握 了 这 些 独立 组 件 的 使 用 ， 
那么 在 后 面 的 学 习 中 将 如 鱼 得 水 ， 游 思 有 余 。 


6.1 Text 文本 组 件 的 应 用 


应 用 程序 中 随处 可 见 各 种 各 样 的 文字 ，Text 文本 组 件 用 于 在 视图 上 显示 文字 ， 其 通用 的 API 
可 以 使 你 轻松 地 在 iOS 平台 与 Android 平台 上 演 染 体验 一 流 的 文字 效果 。 


6.1.1 文字 风格 设置 


首先 打开 第 5 章 创建 的 HelloWorld 工程 ， 在 其 中 创建 一 个 新 的 文件 夹 ， 命 名 为 “Demo”, 之 
后 我 们 的 示例 文件 都 将 放 在 这 个 文件 夹 中 。 在 Demo 文件 夹 中 新 建 一 个 文件 , 命名 为 TextDemojs， 
作为 本 节 示 例文 件 。 在 React Native 中 大 部 分 独立 组 件 都 有 style 这 样 一 个 属性 ， 用 来 设置 组 件 的 
风格 。 一 般 组 件 的 风格 设置 包括 两 部 分 : 公共 部 分 与 定制 部 分 。 公 共 部 分 的 风格 属性 是 继承 于 最 基 
本 的 视图 组 件 View 而 来 ， 包 括 设置 组 件 的 位 置 、 尺 寸 、 背 景色 等 ， 这 不 是 我 们 本 节 的 重点 ， 后 面 
我 们 会 做 具体 的 介绍 。 定 制 部 分 用 来 设置 组 件 某 些 独特 的 属性 ， 例 如 Text 组 件 可 以 设置 字体 、 文 
字 颜 色 、 字 体 对 齐 方式 等 。 

在 TextDemojs 文件 中 编写 如 下 代码 : 

/* 

文本 控件 Text 

Ed 
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import React, {Component} from 'react'; 
import {Text} from '‘'react-native'; 
export default class TextDemo extends Component { 
render (){ 
return ( 
//Text 控件 
<Text style={[style,base]}>Hello Friend!</Text> 
); 


] 7 

// 公 共 样 式 

Var base = { 
// 设 置 控件 距离 上 方 100 的 单位 
top:100 

}; 

//Text 组 件 特有 的 样式 

var Style = { 
// 设 置 文字 颜色 
colors'red’y 
// 设 置 字体 
fontFamily:'Cochin', 
// 设 置 字号 
fontSize:24, 
// 设 置 字体 风格 
fontstyle:'italic', 
// 设 置 字体 粗细 
fontWeight:'bold', 
// 设 置 行 高 
lineHeight:50, 
// 设 置 文字 对 齐 模式 
textAlign:'center', 
// 设 置 文字 修饰 风格 
textDecorationLine:'underline', 
// 设 置 文字 阴影 颜色 
textShadowColor: 'green', 
// 设 置 阴影 偏 移 
textShadowOffset:{ 

width:5, 
height:5 


}; 

//ios 平台 特有 的 样式 

var iosStyle = { 
// 设 置 文字 变 体 


fontVariant:['small-caps'], 
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// 设 置 字符 间距 
letterSpacing:10, 
// 设 置 修饰 线 颜色 
textDecorationColor: 'blue', 
// 设 置 修饰 风格 
textDecorationStyle:'double', 
// 设 置 书写 方向 
writingDirection:'rtl' 

4 

//android 平 台 特 有 的 样式 

var androidStyle = { 
// 设 置 是 否 有 内 间距 
includeFontPadding:false, 
// 设 置 水 平方 向 的 对 齐 模式 
textAlignVertical:'center' 


} 
将 index.iosjs 与 index.Androidjjs 文件 修改 如 下 : 


import React, { Component } from 'react'; 
import { 
AppRegistry 
} from 'react-native'; 
import TextDemo from './Demo/TextDemo'; 
export default class HelloWorld extends Component { 
render() { 
return (<TextDemo />); 


} 


AppRegistry.registerComponent ('HelloWorld', () => HelloWorld); 


在 终端 运行 工程 ， 可 以 看 到 模拟 器 效果 如 图 6-1 所 示 。 

由 于 iOS 与 Android 平台 的 差异 性 ，Text 组 件 风格 设置 中 也 有 一 
些 属性 是 只 针对 iOS 平台 或 者 只 针对 Android 平台 的 ， 如 上 面 代码 中 
的 iosStyle 和 AndroidStyle, 将 这 两 个 风格 对 象 添加 到 Text 组 件 中 , 代 
码 如 下 : 

<Text style={[style,base,iosStyle,androidstyle]}> 
Hello Friend!</Text> 


刷新 两 平台 模拟 器 ， 效 果 分 别 如 图 6-2 与 图 6-3 所 示 。 





Caner a 


10:38 AM 





图 6-1 Text 组 件 效果 
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图 6-2 iOS 平台 效果 
表 6-1 列 出 了 Text 组 件 style 


属性 名 





解释 





图 6-3 Android 平台 效果 


属性 可 以 进行 设置 的 文本 风格 。 
表 6-1 Text 组 件 style 属性 


值 类 型 或 可 选 值 





color 


文字 颜色 


特定 格式 的 color 值 





fontFamily 


fontStyle 


fontWeight 


字体 名 称 


字体 风格 


字体 粗细 














字体 名 称 字 符 串 

可 选 字符 串 : 

。 normal: 正常 

。 italic: 斜体 

可 选 字符 串 : 

。 normal: 正常 

。 bold: 粗 体 

也 可 以 手动 设置 100 到 900 间 的 一 个 整 百 数 
值 字符 串 





lineHeight 


文本 行 高 


数值 





textAlign 


文本 对 齐 方 式 


可 选 字符 串 : 

*” auto: 自动 

。 left: 左 对 齐 

right: 右 对 齐 

center: 居中 

justify: 正 向 〈 仅 iOS 可 用 ) 





textDecorationLine 





文字 修饰 








可 选 字符 串 : 

。， none: 无 修饰 

。 underline: 下 画 线 

。 line-through: 删除 线 

*。 underline line-through: 下 画 线 与 删除 线 
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属性 名 


( 续 表 ) 


解释 a 值 类 型 或 可 选 值 





textShadowColor 文字 阴影 颜色 


通用 特定 格式 的 color 值 





textShadowOffset 文字 阴影 位 置 


设置 为 如 下 格式 对 象 : 


通用 {width:xx,height:xx} 





textShadowRadius 文字 阴影 模糊 半径 


通用 数值 





includeFontPadding “| 是 否 保留 文字 字体 内 间距 


android 布尔 值 





textAlignVertical 文字 竖 直 方向 对 齐 模式 


fontVariant 文字 变 体 


可 选 字符 串 : 

。 auto: 自动 

android ， top:; 上 对 齐 

。 bottom: 下 对 齐 

。 center: 居中 对 齐 

数组 ， 数 组 中 的 元 素 可 选 如 下 字符 串 : 
small-caps 

oldstyle-nums 

lining-nums 





tabular-nums 


proportional-nums 





letterSpacing 字符 间距 


textDecorationColor | 修饰 线 颜 色 


textDecorationStyle “| 修饰 线 风格 


iOS 数值 

iOS 特定 格式 的 color 值 
可 选 字 符 串 : 

。 solid: 直线 
iOS 。 double: 双 线 

， dotted: 短 虚 线 
。 dashed: 长 虚线 





writingDirection 书写 方向 





表 6-1 中 给 出 的 文字 风格 
前 边 编写 的 示例 工程 ， 将 这 些 


6.1.2 ”Text 组 件 属 性 


可 选 字符 串 : 

。 auto: 自动 
。 ltr: 左 方向 
。 rl; 右 方 向 


可 设置 属性 、 相 关 释 义 及 所 设置 值 的 相关 信息 都 非常 完善 ,建议 使 用 
属性 一 一 进行 测试 并 观察 效果 。 练 习 与 实践 是 学 好 编程 的 不 二 法 门 ! 














的 设置 





在 6.1.1 小 节 中 我 们 介绍 的 其 实 只 是 Text 组 件 的 一 个 属性 : style。style 属性 专门 用 来 设置 组 件 


的 文字 风格 ， 除 了 style 之 外 ， 








Text 组 件 中 还 定义 了 许多 属性 ， 用 来 设置 文字 行 数 、 组 件 交 互 效 果 


等 。 在 React Native 中 ， 组 件 属性 的 设置 采用 的 是 与 HTML 一 致 的 语法 规则 。 修 改 TextDemo 类 


如 下 : 
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export default class TextDemo extends Component { 
render (){ 
return ( 
//Text 控件 
<Text style={[style,base,iosStyle,androidSstyle]} 
adjustsFontSizeToFit = {false} 
numberOfLines = {2} 
onLayout = {({nativeEvent:{layout:{x,y,width,height}}})=>{ 
console.log (x,y,width,height); 
0 
onLongPress={ ()=>{ 
console.1og ("长 按 ")， 
和 
onPress={ ()=>{ 
console.log(" 按 下 ") 7 
bE 
selectable={true} 
suppressHighlighting={true} 
>Hello Friend!Hello Friend!Hello Friend!Hello Friend!</Text> 


}; 

上 面 代码 设置 Text 组 件 显示 行 数 为 2 行 ， 超 出 部 分 将 会 被 截断 。 上 面 的 onLayout 属性 、 
onLongPress 属性 和 onPress 属性 分 别 用 于 一 些 用 户 交 互 事件 的 监听 。onLayout 用 于 监听 布局 变化 
或 第 一 次 挂 载 布局 完成 的 消息 ， 其 中 传 入 的 参数 格式 如 下 : 

{nativeEvent: {layout: {x, y, width, height}}} 

上 面 代码 中 我 们 使 用 了 解构 赋值 来 获取 布局 信息 。onLongPress 方法 会 在 Text 组 件 被 长 按时 调 
用 ，onPress 方法 会 在 Text 组件 被 单 击 时 调用 。 

表 6-2 列 出 了 Text 组 件 的 常用 属性 及 释义 。 

表 6-2 Text 组 件 的 常用 属性 






































属性 名 解释 值 类 型 或 可 选 值 
adjustsFontSizeToFit | 设置 文字 是 否 自 适 应 大 小 布尔 值 
g 设置 文字 是 否 根据 系统 字体 大 小 进 二 
allowFontScaling 行 缩放 布尔 值 
numberOfLines 设置 文本 显示 行 数 数值 
函数 ， 其 中 参数 格式 如 下 : 
onLayout 当 组 件 布 局 变化 或 挂 载 完 成 后 调用 {nativeEvent: {layout: {x, y, width, 
height}}} 
onLongPress 当 组 件 被 长 按 后 调用 此 函数 函数 
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( 续 表 ) 
属性 名 解释 值 类 型 或 可 选 值 
onPress 当 组 件 被 单 击 时 调用 此 函数 函数 
selectable 设置 是 否 允许 进行 长 按 复制 文本 布尔 值 
了 当 人 允许 文字 尺寸 自 适应 时 ， 设 置 最 S 
minimumFontScale 小 的 文字 缩放 比例 数值 在 0.01 一 1 之 间 
布尔 值 , 如 果 设置 为 rue, 则 组 件 被 
suppressHighlighting | 设置 是 否 显示 交互 效果 按 下 时 无 效果 ， 如 果 设 置 为 false， 
则 组 件 被 按 下 时 会 有 阴影 





6.1.3 ”Text 组件 的 藤 套 


React Native 中 


1 的 Text 组 件 还 有 一 个 十 分 强大 的 特性 ， 在 于 其 支持 霸 套 。 在 iOS 原生 开发 中 ， 


富 文本 的 创建 往往 需要 使 用 到 NSAttributeString 类 ， 使 用 它 创 建 的 富 文本 编写 复杂 且 不 直观 。 在 
React Native 中 ， 你 可 以 使 用 Text 组 件 的 媒 套 来 实现 富 文本 泻 染 ， 例 如 : 


export default class TextDemo extends Component { 


render (){ 


return ( 


] 7 


//Text 控件 
<Text style={base} adjustsFontSizeToFit = {false} 
numberOfLines = {2} 
onLayout = {({nativeEvent:{layout:{x,y,width,height}}})=>{ 
console.log(x,y,width,height); 
和 
onLongPress={ ()=>{ 
console.10g ("长 按 "); 
2 
onPress={ ()=>{ 
console.10g(" 按 下 "); 
}} 
selectable={true} 
suppressHighlighting={true} 
>Hello Friend! 
<Text style={{color:'red',fontSize:25}}>Hello World</Text> 
</Text> 


上 面 代码 的 运行 效果 如 图 6-4 所 示 。 


注意 ， 在 进行 


Text 组 件 的 嵌 套 时 ， 内 层 的 Text 组 件 会 默认 继承 外 层 Text 组 件 的 属性 设置 ， 


设置 内 层 Text 组 件 的 属性 会 覆盖 掉 继 承 效 果 。 
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Hello World 





图 6-4 Text 组 件 的 嵌 套 


6.1.4 ”React Native 程序 的 调试 

前 面 的 示例 代码 中 我 们 使 用 了 console.log0 方 法 进行 打印 操作 ， 那 么 这 些 信息 会 输出 在 哪里 ， 
我 们 又 如 何 来 进行 React Native 程序 的 调试 呢 ? 其 实 也 十 分 容易 ，React Native 应 用 程序 支持 在 
Google Chrome 浏览 器 中 进行 远程 调试 。 首 先 在 模拟 器 中 运行 项 目 ， 在 iOS 模拟 器 中 使 用 
coommand+d 可 以 调 出 菜单 栏 ， 在 Android 模拟 器 中 则 是 使 用 command+m 来 调 出 菜单 栏 ，iOS 模 
拟 器 与 Android 模拟 器 菜单 栏 效果 分 别 如 图 6-5 和 图 6-6 所 示 。 


Reload 
Stop Remote JS Debugging 
Enable Live Reload 


Start Systrace 


Enable Hot Reloading 


Show Inspector 


图 6-5 iOS 模拟 器 菜单 栏 图 6-6 Android 模拟 器 菜单 栏 


单 击 菜单 栏 中 的 Debug JS Remote 选项 即 可 开启 调试 模式 (如 果 已 经 开启 调试 模式 ， 这 里 将 显 
示 Stop Romote JS Debugging， 用 来 关闭 调试 模式 ) 。 打 开 调 试 模式 后 会 自动 弹出 Google Chrom 浏 
览 器 的 窗口 ， 效 果 如 图 6-7 所 示 。 
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OocahostaosT cebugoor PIC 


Dark background 
React Native JS code runs inside this Chrome tab. 
Press to open Developer Tools. Enable Pause On Caught Exceptions for a better debugging experience. 


Status: Debugger session #10001 active 





图 6-7 Google Chrom 浏览 器 的 React Native 调试 界面 


使 用 command+option+j 即 可 打开 浏览 器 的 开发 者 模式 ， 在 其 中 可 以 看 到 我 们 的 JavaScript 代 
码 以 及 控制 台 的 打印 信息 ， 也 可 以 方便 地 添加 断 点 进行 调试 。 


6.2 ”Button 按钮 组 件 的 应 用 


Button 组 件 是 React Native 中 一 个 简单 的 按钮 交互 组 件 ， 其 样式 无 法 进行 太 多 的 定制 化 ， 对 于 
复杂 的 交互 控件 ， 我 们 一 般 会 采用 TouchableOpacity 组 件 或 TouchableNativeFeedback 组 件 来 定制 。 


6.2.1 ”Button 组 件 的 简单 使 用 


在 HelloWorld 工程 的 Demo 文件 夹 中 新 建 一 个 命名 为 ButtonDemojjs 的 文件 , 在 其 中 编写 如 下 
测试 代码 : 


/* 
按钮 控件 Button 
入 天 
import React, {Component} from 'react'; 
import {Button,View} from 'react-native'; 
export default class ButtomDemo extends Component{ 
render (){ 
return( 
<View style={{top:100}}> 
<Button title=" 按 钮 " 
color='red' 
onPress={ ()=>{ 
console.log ("Button"); 
}} 
disabled={false}/> 
</View> 
小 


} 


Button 组 件 中 可 设置 的 属性 非常 少 ， 并 且 无 法 定义 style 样式 ， 因 此 如 果 我 们 需要 对 Button 组 
件 进 行 位 置 尺寸 的 控制 ， 需 要 将 其 嵌 套 入 一 个 View 组 件 中 。Button 组 件 支持 设置 的 属性 如 表 6-3 
所 示 。 
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表 6-3 Button 组 件 的 属性 




















属性 名 解释 平台 值 类 型 或 可 选 值 
accessibilityLabel | 读 屏 软件 会 读 取 这 个 属性 的 内 容 通用 字符 串 
对 于 iOS 平台 ， 其 设置 文字 的 颜色 ， 对 于 Android | 、 
So 平台 ， 其 设置 的 是 按钮 的 背景 颜色 人 
布尔 值 
disabled 设置 此 按钮 是 否 有 效 通用 tme: 按钮 可 点 击 
false: 按钮 不 可 点 击 
onPress 设置 按钮 的 触发 方法 通用 函数 
title 设置 按钮 的 标题 通用 字符 串 





将 index.iosjs 和 index.Androidjs 文件 的 内 容 修改 如 下 : 


import React, { Component } from 'react'; 


import { 


AppRegistry 
} from 'react-native'; 


import ButtonDemo from './Demo/ButtonDemo'; 








export default class HelloWorld extends Component { 
render() { 
return (<ButtonDemo />); 


} 
} 


AppRegistry.registerComponent ('HelloWorld', 


运行 工程 ， 两 平台 的 效果 分 别 如 图 6-8 和 图 6-9 所 示 。 


arer 





图 6-8 


iOS 平台 按钮 效果 











() => HelloWorld); 


图 6-9 Android 平台 按钮 效果 
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6.2.2 ”小 应 用 : 屏幕 需 虹 灯 


本 小 节 我们 来 实现 一 个 功能 , 当 单 击 按钮 的 时 候 实现 屏幕 的 背景 色 随机 切换 。 在 ButtonDemojs 


文件 中 编写 如 下 代码 : 


import React, {Component} from 'react'; 


import {Button,View} from '‘'react-native'; 


export default class ButtomDemo extends Component{ 


constructor 


(props){ 


super (props); 
this.state = { 
style:{ 


] 7 
render (){ 
returnl( 


backgroundColor: 'blue', 
flex:1 


<View style={this.state.style}> 


<View style={{top:100}}> 
<Button title=" 按 钮 " 
Color='red' 


onPress={this.changeColor} 


disabled={false}/> 
</View> 


</View> 


1 本 
} 


changeColor=()=>{ 
this.setState({ 
style:{ 
backgroundColor:'rgb('+(Math.random()*255)+','+(Math.random()*255)+'," 


+(Math.random()*255 


} 
在 上 面 的 代码 中 ， 
设置 时 我 们 采用 了 state 


eh a 
flex:1 


最 外 层 的 View 组 件 充满 整个 设备 屏幕 ， 为 背景 容器 ， 在 对 风格 
状态 来 控制 。state 是 React Native 中 组 件 用 来 保存 属于 本 身 的 某 些 可 变数 


据 的 属性 。 在 constructor 构造 方法 中 需要 对 其 进行 初始 化 ， 当 我 们 通过 setState() 方 法 来 寻 





个 属性 时 ， 会 自动 进行 纪 


且 件 的 重新 演 染 ,起 到 动态 刷新 的 作 


style 进行 








新 修改 这 


用 。 上 面 代码 中 有 一 个 语法 点 需要 格外 
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注意 ， 如 果 changeColor 是 普通 函数 ， 则 在 调用 时 ， 其 内 部 的 this 是 指向 Button 组 件 的 ， 并 不 是 我 
们 自 定义 的 ButtonDemo 组 件 ， 因 此 这 里 必须 使 用 箭头 函数 ， 你 一 定 还 记得 ， 箭 头 函 数 中 的 this 是 
被 固化 的 ， 其 中 this 的 指向 在 函数 生成 时 就 已 经 固定 ， 始 终 指 向 ButtonDemo 实例 对 象 。 

运行 工程 ， 连 续 单 击 按钮 ， 屏 幕 向 霓虹灯 一 样 闪烁 起 来 。 





6.3 Image 图 像 组 件 的 应 用 


Image 组 件 用 于 在 界面 上 演 染 图 像 ， 其 所 演 染 的 图 像 可 以 是 
React Native 工程 中 的 本 地 图 片 素材 、base64 编码 的 图 像 字 符 串 、iOS 
或 Android 原生 工程 中 的 图 像素 材 以 及 网 络 素材 .在 React Native 中 ， 
Image 是 一 个 十 分 强大 的 UI 组件 。 


6.3.1 泻 染 图 像 的 方式 


React Native 提供 了 统一 的 方式 来 管理 iOS 与 Android 项 目 中 的 
图 像素 材 。 如 果 需 要 在 界面 中 显示 一 个 本 地 的 图 像 资 源 ， 最 简单 的 
方式 是 将 图 片 文件 放 入 React Native 工程 中 , 例如 我 们 在 HelloWorld 
[ 程 中 新 建 一 个 文件 夹 ， 命 名 为 source， 此 时 HelloWorld 工程 结构 
应 该 如 图 6-10 所 示 。 

在 source 文件 夹 下 放 入 一 张 png 图 像 文件 作为 测试 图 片 。 在 
Demo 文件 夹 下 新 建 一 个 文件 ， 命 名 为 ImageDemojs。 在 其 中 编写 
如 下 测试 代码 : 


import React, {Component} from 'react'; 





图 6-10 HelloWorld 工程 结构 


import {Image} from 'react-native'; 
export default class ImageDemo extends Component{ 
render (){ 
return( 
<Image source={require('../source/image.png')}/> 
Nn 


} 
Image 组 件 的 source 属性 设置 要 演 染 图 片 的 来 源 ， 如 果 是 本 地 静态 图 片 ， 可 以 使 用 require() 


方法 来 引入 ， 其 中 需要 设置 正确 的 图 片 文件 相对 路 径 。 将 index.iosjs 与 index.Androidjs 文件 修改 
如 下 : 


import React, { Component } from 'react'; 





import { 
AppRegistry 
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} from 'react-native'; 
import ImageDemo from './Demo/ImageDemo'; 
export default class HelloWorld extends Component { 

render() { 

return (<ImageDemo />); 

} 
} 
AppRegistry.registerComponent ('HelloWorld', () => HelloWorld); 


在 双 平 台 上 运行 项 目 ， 效 果 如 图 6-11 所 示 。 





图 6-11 Image 组 件 运 行 效果 


注意 ， 在 进行 本 地 图 像素 材 检索 的 时 候 ， 你 可 以 根据 不 同 的 屏幕 分 辨 率 提供 不 同 的 素材 ， 
只 需要 为 图 片 素材 添加 @2x、@3x 这 样 的 后 缓 即 可 。 同 样 ， 你 也 可 以 使 用 同一 个 图 像素 材 


名 称 为 iOS 平台 和 Android 平台 提供 不 同 的 素材 文件 ， 需 要 遵守 image.ios.png 
(image.android.png) 这 样 的 素材 命名 方式 . 在 使 用 时 ， 直 接 使 用 image.png 即 可 ，React Native 
会 自动 根据 平台 选择 正确 的 图 片 进行 打包 。 





使 用 React Native 做 混合 开发 也 是 一 种 不 错 的 选择 。 所 谓 混合 开发 ， 是 指 应 用 程序 中 有 些 部 分 
是 React Native 开发 的 , 有 些 部 分 是 原生 开发 的 。 在 这 种 情况 下 难免 会 有 素材 共用 的 场景 , 在 React 
Native 中 也 可 以 直接 使 用 Xcode 工程 xcassets 目录 或 者 Android 工程 的 drawable 目录 中 的 素材 。 示 
例 代码 如 下 : 
render (){ 
return( 
<Image style={{width:100,height:50}} source={{uri: 'image'}}/> 
); 
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这 种 方式 加 载 本 地 图 片 必须 指定 图 片 的 尺寸 ，uri 属性 直接 指定 图 像 文件 的 名 称 ， 不 需要 带 后 
级 。 需 要 注意 ， 对 于 Android 工程 ， 文 件 素 材 必须 添加 到 res 目录 下 的 drawable 文件 夹 里 ， 并 且 
新 编译 。 对 于 iOS 工程 , 图 像 文件 则 必须 放 在 xcassets 目录 中 , 并 且 需 要 在 Xcode 中 重新 编译 项 目 。 

Image 组 件 也 可 以 直接 加 载 网 络 图 片 ， 示 例如 下 : 


render (){ 
return( 














<Image source={{uri: 'https://facebook.github.io/react/img/ 
0g0o og.png'}} 
style={ {width: 200, height: 200}} /> 
J 
} 


注意 ， 这 种 方式 加 载 的 图 片 也 必须 指定 好 尺寸 。 
除了 上 面 说 的 几 种 方式 外 ，Image 组 件 也 可 以 直接 显示 base64 编码 的 字符 串 图 片 ， 示 例如 下 : 


var base64Icon = 'data:image/png; 
base64, iVBORwOKGgOoAAAANSUhEUgAAAESAAABLCAQAAACSR7JhAAADtUl1EQVR4AC3YA2Bj 6QLHOXP 
Tl1Fzbtm29tW3btm3bfLZ2tv7e20bZnms7d8Uw098tuetPzrxv8wiISrtVudrG2JXQZ4VOv+qUfmqCGG 
llmqLhoA52021b0OmrjsnhKpgeUNEs9120pdlkvihA3ULGVHiQO2narKSHKkEMulm9VgUyE60slaWoM 
QUbpZOWE+kaqs4eLEjdIlZTcFZBOndcl+1hB1l1lZrIuk5P2aiblNBpZaL+JaOGIt01s47SKzLC7Cqrl 
GF6RZ09HGoNy11Y12aRSWL5GuzqWUlKafRdoRp0iOQEiDzgZzPnG6DbldcomadViflnl/cL93tOoVbs 
OLVM2jylvdWjXolWX1hmfZbGR/wjypDjFLSZIRovO9BgYmtUqPQP1QrPapecLgTIy0jMgPKtTeob2z 
WtrGH3xvjUkPCtNg/tmlrjwrMat+mdUkPd3hWbHOjArPGiU9UufCSNNWF2Z40wpwn+62/66R2RUtoso10 
B34tnLOcy7YBlfUdc9e0q3yru8PGM773vXsuZ5YIZX+5xmHwHGVvl1rGPN62SiP1lsmOsMMde40wKv2V 
mwPPVXNut4sVpUreZiLBHi0qln/VQeI/LTMYXpsJtFiclUN+5HVZazim+Ky+7sAvxWnvjXrJFneVtL 
WLyPJuU9IK3cXLWeOlbMT1rIelbMD1lrLenrjEQOtIF+fuI9xRp9ZBFP6+b6WT8RrxEpdK64BuvHgDk+v 
Uy+b5hYk6zfyfs051gRoNOlusU12WWRWL73/MMEy9PMi 9qIrR4ZpV16RrvduxazmylFSvuFXRkqTnE 
Tm2kdb5U8xGjLw/spRrluTovAuOgQE+0N/DvFrG/Jt7i/FzwxbA9kDanhf2w+t4V97G81rT7wc08aA 
2QNUkuTfEW/KimTOlwdlfK4yEw030VfTORtZbzjeMprNq8m8tnSTASrTLti640BNdpmMOmOeEwvfPwR 
bUBywG5TzjPCsdwk3IeAXjQblLCoXnDVeoAz6SfJNkS5TTzytCNZk/POtTSVAO0NwOFWZw86wNJRpubp 
Xsn60NJFlHeqlYRbslqZzm2jnE2Z3qcSKgmOkT1i3zZVS7y/iivZTweYXJ26Y+RTbV1zh3hYkgyFGSTK 
PfRVbRqWNVReaxYeSLarYv10qsmh1s95S7G+eENK0f3]jJYKTbV6bOwepPjfhtafsvUsqrQvrGC8YhmnO 
9cSCk3yuY984FlvesdHYhWJS5FvASlacshUsajFt2mUM9pqzvKGcyNJW0OarTKN1GGGzQ1HOtXwLDgQT 
UrS8eIQAAAABJRUSErkJggg=="; 
export default class ImageDemo extends Component{ 
render (){ 
return( 
<Image source={{uri: base64Icon}} 
style={ {width: 200, height: 200}} /> 
x 


1 
运行 工程 ， 可 以 看 到 图 像 也 被 演 染 到 了 模拟 器 上 。 
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6.3.2 ”Image 组 件 的 风格 自 定义 


Image 组 件 支持 对 style 属性 进行 设置 ,Image 组 件 所 支持 的 风格 设置 有 4 类 , 分 别 是 基本 视图 
类 、 阴 影 类 、 动 画 变换 类 和 Image 组 件 定制 类 。 其 中 ， 基 本 视图 类 用 来 设置 一 些 布局 属性 ， 后 面 会 
有 专题 进行 介绍 。 阴 影 类 的 属性 只 在 iOS 平台 有 效 。 动 画 变换 类 的 风格 属性 用 来 对 Image 组 件 进 
行 旋转 、 缩 放 、 平 移 等 操作 。Image 组 件 定制 类 则 可 以 对 Image 组 件 进 行 背 景色 、 圆 角 、 边 框 等 处 
理 。 在 ImageDemojjs 中 编写 如 下 示例 代码 : 


import React, {Component} from 'react'; 
import {Image} from '‘'react-native'; 
export default class ImageDemo extends Component{ 
render (){ 
return( 
<Image source={require('../source/image.png')} 
style={ [shadowStyle,baseStyle, imageStyle]} /> 
); 


} 
//base 
let baseStyle = { 
width:150, 
height:150, 
} 
//transform 
//transform 
let tansformStyle = { 
transform: [{rotate:'0.1rad'}, {rotateX: '0.lrad'}, {rotateY: '60deg'}, 
{rotatez: '0.1rad'}, {scale: 0.9}, {scaleX: 0.9}, {scaleY: 0.9}, {translatex: 50}, 
{translateY: 50}, {skewX: '20deg'}, {skewY: '20deg'}] 
}//shadow 
let shadowStyle = { 
shadowColor: 'red', 
shadowOffset:{ 
width:5, 
height:5 
}, 
shadowOpacity:1, 
shadowRadius:5 
} 
//image 
let imageStyle = { 
backfaceVisibility:'visible', 
overflow: 'visible', 
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resizeMode:'contain', 
backgroundColor:'green', 
borderColor: 'blue', 
borderWidth:3, 

// 指 定 所 有 非 透明 的 颜色 为 某 个 颜色 
// tintCcolor:'purple'v 
opacity:1, 

//android 
borderBottomLeftRadius:30, 
borderBottomRightRadius:30, 
overlayColor: 'black' 


} 


注意 ,与 Image 阴影 相关 的 属性 设置 只 在 iOS 平台 有 效 , 并 且 必 须 将 overflow 属性 设置 为 visible 
时 有 效 。 阴 影 相 关 属 性 如 表 6-4 所 示 。 


表 6-4 阴影 相关 属性 














属性 名 解释 值 类 型 或 可 选 值 
shadowColor 设置 阴影 颜色 特定 的 颜色 字符 串 
如 下 格式 的 对 象 : 
shalom Oe 设置 阴影 位 置信 和 {width:number,height:number} 
shadowOpaci 设置 阴影 的 透明 度 数值 (0 一 1) 
shadowRadius 设置 阴影 的 模糊 半径 数值 
动画 变换 部 分 的 属性 用 来 对 Image 组 件 进 行 一 些 空间 上 的 修改 ， 属 性 列表 如 表 6-5 所 示 。 
表 6-5 动画 变换 属性 
属性 名 解释 值 类 型 或 可 选 值 
transform 进行 变换 设置 特定 格式 对 象 
我 们 需要 具体 讲 一 讲 transform 这 个 属性 的 应 用 。 其 对 象 基 本 格式 如 下 : 
//transform 


let tansformStyle = { 
transform: [{rotate:'0.1lrad'}, {rotateX: '0.1lrad'}, {rotateY: '60deg'}, 
{rotatez: '0.1lrad'}, {scale: 0.9}, {scaleXx: 0.9}, {scaleY: 0.9}, {translateXx: 50}, 
{translateY: 50}, {skewX: '20deg'}, {skewY: '20deg'}] 
} 


其 中 ，rotate 表示 进行 旋转 变换 ， 可 以 用 角度 制 与 弧度 制 两 种 表达 方式 ， 以 rad 为 后 绥 表 示 使 
用 弧度 制 ， 以 deg 为 后 缀 表示 使 用 角度 制 ，rotateX、rotateY、rotateZ 分 别 设置 相对 义 轴 、Y 轴 、Z 
轴 的 旋转 变换 。scale 表示 进行 缩放 变换 ，scaleX 和 scaleY 分 别 表示 相对 X 轴 和 YY 轴 进 行 缩放 。 
translateX 和 translateY 用 于 平移 变换 ， 分别 表示 沿 XX 轴 方 向 平移 和 沿 Y 轴 方 向 平移 。skew 则 是 用 
于 进行 斜 切 变 换 ，skewX 和 skewY 分 别 表示 相对 X 轴 或 Y 轴 和 斜 切 。 

用 于 定制 Image 组 件 风 格 的 属性 如 表 6-6 所 示 。 
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表 6-6 Image 组 件 风格 属性 















































属性 名 解释 平台 值 类 型 或 可 选 值 
Re 可 选 字符 申 : 
backfaceVisibility rt heat i 通用 » visible: 背面 可 见 
*。 hidden: 背面 不 可 见 
可 选 字符 串 : 
resizeMode 设置 图 片 拉 伸 模式 通用 a a 
，_contain:; 拉 伸 到 充满 空间 
backgroundColor 设置 容器 背景 颜色 通用 特定 的 颜色 字符 串 
borderColor 设置 组 件 边框 颜色 通用 特定 的 颜色 字符 串 
borderRadius 设置 组 件 边框 圆 角 半径 通用 数值 
borderWidth 设置 组 件 边框 宽度 通用 数值 
可 选 字 符 串 : 
overflow 设置 超出 边框 的 部 分 是 否 可 见 通用 。 visible: 可 见 
。 hidden: 不 可 见 
tintColor 为 所 有 非 透明 像素 指定 颜色 通用 特定 的 颜色 字符 串 
opacity 设置 组 件 透明 度 通用 数值 (0 一 1) 
overlayColor 图 片 圆 角 时 指定 颜色 填充 空白 Android “| 特定 的 颜色 字符 串 
borderBottomLeftRadius ”| 设置 组 件 左下 角 圆 角 半径 Android | 数值 
borderBottomRightRadius “| 设置 组 件 右 下 角 圆 角 半 径 Android | 数值 
borderTopLeftRadius 设置 组 件 左上 角 圆 角 半 径 Android | 数值 
borderTopRightRadius 设置 组 件 右上 角 圆 角 半 径 Android “| 数值 


注意 ， 对 于 iOS 平台 ， 圆 角 和 阴影 是 不 能 同时 设置 的 ， 当 overflow 属性 设置 为 visible 时 ， 组 
件 就 无 法 再 显示 圆 角 ， 但 是 可 以 显示 阴影 ， 如 果 将 overflow 属性 设置 为 hidden， 则 阴影 将 会 隐藏 ， 
圆 角 效果 可 以 显示 。 运 行 工程 ， 效 果 如 图 6-12 所 示 。 





图 6-12 对 Image 组 件 进行 风格 定制 
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6.3.3 Image 组 件 的 属性 和 方法 解析 


Image 组 件 既 可 以 加 载 本 地 的 图 像素 材 ， 也 可 以 加 载 网 络 上 的 图 像素 材 。Image 组 件 中 还 提供 
了 图 片 加 载 过 程 的 监听 ， 修 改 ImageDemo 类 的 render 方法 如 下 : 


render (){ 
return( 
<Image source={require('../source/image.png')} 
style={ [shadowStyle,baseStyle, imageStyle]} 
onLayout={ ()=>{ 
console.log("onLayout"); 
}} 
onLoad={ ()=>{ 
console.log("onLoad"); 
}} 
onLoadEnd={ ()=>{ 
console.log("onLoadEnd"); 
}} 
onLoadStart={ ()=>{ 
console.log("onLoadStart"); 
}} 
es 
js 
} 


在 模拟 器 中 运行 工程 ， 打 开 调试 模式 ， 输 出 面板 效果 如 图 6-13 所 示 。 


onLayout ImaqeDemo. js:10 
onLoadStart ImageDemo. js:19 


onLoad ImageDemo. js:13 
onLoadEnd ImageDemo, js:16 


图 6-13 控制 台 输出 的 打印 信息 





实际 上 ，onLoad 属性 设置 的 回调 函数 与 图 像 的 加 载 无 关 ， 当 Image 组 件 挂 载 完 成 或 布局 改变 
的 时 候 会 被 调用 。onLaodStart 属性 设置 的 回调 函数 当 组 件 将 要 开始 加 载 图 片 时 调用 。onLaod 属性 
设置 的 回调 函数 在 组 件 加 载 完成 时 会 回调 .onLaodEnd 属性 设置 的 回调 函数 当 组 件 加 载 结束 后 会 
调 ， 这 个 函数 无 论 图 像 加 载 成 功 或 失败 都 会 被 回调 。 

Image 组 件 支持 设置 的 属性 列表 如 表 6-7 所 示 。 


表 6-7 Image 组 件 支持 设置 的 属性 



































解释 
组 件 挂 载 完成 或 布局 改变 时 | 、 
调用 的 回调 i 人 
组 件 加 载 成 功 后 调用 的 回调 | 通用 





值 类 型 或 可 选 值 











onLaod 
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( 续 表 ) 
属性 名 解释 平台 值 类 型 或 可 选 值 
onLoadEnd 组 件 加 载 结束 后 调用 的 回调 | 通用 函数 
onLoadStart 组 件 开始 加 载 时 调用 的 回调 | 通用 函数 
可 选 字符 串 : 
， cover: 保持 宽 高 比 不 变 将 图 片 充满 整个 容器 
， contain: 保持 宽 高 比 不 变 将 图 片 缩放 到 刚好 
2 ee 6 适应 容器 
resizeMode 设置 图 像 的 拉 伸 模式 通用 。 stretch， 拉 伸 图 片 到 充满 容器 
。 repeat: 保持 图 片 原 有 尺寸 进行 赋值 平 铺 ， 仅 
iOS 平台 可 用 
，_center: 居中 不 拉 伸 
Source 设置 图 像 资源 通用 带 有 uri 属性 的 对 象 或 者 require 引入 的 路 径 
可 选 字符 串 : 
， auto: 自动 计算 
resizeMethod 设置 图 像 的 拉 伸 方 法 Android | 。 resize: 在 图 片 解码 之 前 对 内 存 中 的 数据 进行 
修改 
， scale: 对 图 片 进行 缩放 
i 会 读 取 这 个 属 改 
accessibilityLabel es 性 | ios 字符 串 
为 图 像 添加 模糊 滤 镜 ， 设 , 
blurRadius 置 模糊 半径 iOS 数值 
caplInsets 当 图 像 拉 伸 的 时 候 , capinsets iOS st 
指定 的 边缘 不 会 被 拉 伸 i 
bottom:number,right:munber} 
py 特定 对 象 : 
defaultSource 人 片 时 默认 加 载 的 iOS {uri:string,width:number, 
height:number,scale:number} 
当 加 载 图 片 出 错 的 时 候 调 用 | . 
onError 的 回调 iOS 函数 
如 果 图 片 支持 分 步 加 载 , 在 | . 
onPartialLoad 分 步 加 载 过 程 中 会 被 调用 iOS 函数 
特定 参数 的 函数 ， 参 数 格式 示例 如 下 : 
onProgress={( 
. 村 在 加 载 过 程 中 不 断 调 用 ， 返 ios { 





回 图 片 的 加 载 进 度 








nativeEvent: {loaded, total} })=> 
{console.log(loaded,total); 
Hh 


除了 上 面 所 提 到 的 属性 ，Image 组 件 中 还 定义 了 两 个 静态 方法 ， 如 表 6-8 所 示 。 
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表 6-8 Image 组 件 的 两 个 静态 方法 


























方法 名 解释 平台 参数 
，success: 函数 , 参数 格式 为 (width: number height: 
getSize(uri,success,error) | 获取 图 像 的 尺寸 “| 通用 number)， 回 调 时 可 以 获取 图 像 的 尺寸 
。 error: 函数 ， 参 数 格式 为 (error: any) 
i 
perfetch(uri) es 二 各 通用 略 














其 中 ，getSize 方法 可 以 预先 获取 一 个 图 像素 材 的 尺寸 ， 示 例如 下 : 


render (){ 
Image .getSize('http://facebook.github.io/react/img/1ogo og.png', 
(width, height)=>{ 
console.log (width,height); 
}, (any)=>{ 
console.log (any); 
Yh 
return( 
<Image source={require('../source/myImage.png')} style= 
{[baseStyle, shadowStyle, imageStyle,transfromStyle]} 
onLayout={ ()=>{ 
console.log("onLayout"); 
好 
onLoad={ ()=>{ 
console.log("onLoad"); 
}} 
onLoadEnd={ ()=>{ 
console.log("onLoadEnd"); 
onLoadStart={ ()=>{ 
console.log("onLoadSstart"); 
}} 
blurRadius={10} 
/> 


这 里 讲 的 静态 方法 是 指定 义 在 Image 类 上 面 的 方法 ， 使 用 Image 类 来 进行 调用 ， 定 义 在 实 
例 对 象 或 者 原型 链 上 的 方法 称 为 示例 方法 。 





Image 组 件 可 以 以 单 标签 的 形式 作为 独立 组 件 , 也 可 以 以 双 便签 的 形式 来 嵌 套 其 他 组 件 ， 它 的 
这 种 特性 常用 于 为 其 他 组 件 添加 背景 图 ， 例 如 : 
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render (){ 
return( 
<Image 
source={{uri:"http://facebook.github.io/react/img/ 
logo og.png"}} 
defaultSource={require('../source/timg.jpeg')} 
style={ [shadowStyle,baseStyle, imageStyle]} 
blurRadius={10} 


> 
<Text style={{top:50,color:"white",backgroundColor: 
"#00000000'}} 
> 
你 好 ，Image! 
</Text> 
</Image> 


Wn 
} 


运行 工程 ， 效 果 如 图 6-14 所 示 。 





图 6-14 为 Text 组 件 添加 背景 图 


6.4 Switch 开关 组 件 的 应 用 


Switch 组 件 用 于 创建 一 个 开关 控件 , 其 只 有 两 种 状态 ,分别 为 开 或 者 关 . 在 iOS 平 台中 有 UISwitch 
这 样 一 个 原生 的 开发 组 件 ，Android 平台 并 不 支持 ， 因 此 此 组 件 在 两 个 平台 的 样式 差异 较 大 。 在 
HelloWorld 工程 的 Demo 文件 夹 中 新 建 一 个 命名 为 SwitchDemojjs 的 文件 ， 在 其 中 编写 如 下 代码 : 
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import React, {Component} from 'react'; 
import {Switch,View} from '‘'react-native'; 
export default class SwitchDemo extends Component{ 
constructor (props){ 
super (props); 
this.state = { 
value:false 


render (){ 
return( 
<Switch style={switchStyle} 
value={this.state.value} 
disabled={false} 
onValueChange={ 

(value)=>{ 
this.setState({value:value}); 
console.log(value); 

bE 

onTintColor='red' 

thumbTintColor='blue' 

tintColor='green'/> 


} 

let switchStyle = { 
top:100, 
left:100, 
width:50, 
height:50 

} 


注意 ，Switch 是 一 种 受 控 组 件 ， 即 当 用 户 点 击 开 关 进 行 开关 状态 的 切换 时 ， 首 先 会 调用 
onValueChange 属性 设置 的 回调 ， 在 回调 中 会 将 开发 的 状态 反馈 给 开发 者 ， 开 发 者 需要 手动 调整 开 
关 的 显示 样式 ， 使 用 setState 方法 来 进行 界面 的 刷新 。 运 行 工程 ，iOS 平台 与 Android 平台 效果 分 
别 如 图 6-15、 图 6-16 所 示 。 
Switch 组 件 可 设置 的 属性 如 表 6-9 所 示 。 











表 6-9 Switch 组 件 可 设置 的 属性 





属性 名 解释 平台 值 类 型 或 可 选 值 
布尔 值 
disabled 是 否 有 效 通用 ， ture: 表示 可 进行 用 户 交互 


。 false: 表示 不 可 进行 用 户 交互 
函数 ， 会 将 开发 状态 作为 参数 传递 





onValueChange 当 用 户 操作 开关 时 调用 的 回调 | 通用 
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( 续 表 ) 
属性 名 解释 平台 值 类 型 或 可 选 值 
布尔 值 
value 组 件 状 态 通用 。 tme: 开 状 态 
。 false: 关 状 态 
onTintColor 开启 状态 时 的 背景 颜色 通用 特定 的 颜色 字符 串 
thumbTintColor 开关 滑 块 的 颜色 通用 特定 的 颜色 字符 串 
tintColor 关闭 时 的 泻 染 颜色 通用 特定 的 颜色 字符 串 
AO 
®@) 
图 6-15 iOS 平台 的 Switch 组 件 图 6-16 Android 平台 的 Switch 组 件 


6.5 Slider 滑 块 组 件 的 应 用 


滑 块 组 件 是 React Native 中 提供 的 一 个 简洁 的 选 值 组 件 , 对 iOS 与 Android 平台 都 有 良好 的 支 
持 。 打 开 HelloWorld 项 目 ， 在 Demo 文件 夹 下 新 建 一 个 命名 为 SliderDemo.js 的 文件 ， 在 其 中 编写 
如 下 代码 : 


import React, {Component} from 'react'; 
import {Slider} from 'react-native'; 
export default class SliderDemo extends Component{ 
render () { 
return( 
<Slider style={baseStyle}/> 
); 
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let baseStyle = { 
top:100, 
marginLeft:30, 
marginRight:30 
} 
上 面 创建 了 一 个 最 简单 的 滑 块 组 件 , 将 其 固定 在 其 父 容器 距离 左右 各 30 个 距离 单位 、 上 边 100 


个 距离 单位 的 位 置 。 修 改 index.iosjs 与 index.Androidjs 文件 如 下 : 


import React, { Component } from 'react'; 
import { 
AppRegistry 
} from 'react-native'; 
import SliderDemo from './Demo/SliderDemo'; 
export default class HelloWorld extends Component { 
render() { 
return (<SliderDemo />); 


} 
AppRegistry.registerComponent ('HelloWorld', () => HelloWorld); 


运行 工程 ， 效 果 如 图 6-17 与 图 6-18 所 示 。 


To 器 


Siom 











图 6-17 iOS 平台 的 滑 块 组 件 图 6-18 Android 平台 的 滑 块 组 件 


在 iOS 原 生 开 发 中 ,系统 提供 了 UISlider 这 样 一 个 滑 块 控件 ,因此 Slider 组 件 在 iOS 和 Android 
平台 上 的 表现 有 略微 不 同 。 








Slider 组 件 也 支持 样式 和 功能 上 的 定制 ， 其 中 提供 了 许多 属性 供 我 们 直接 使 用 ， 示 例如 下 : 


render (){ 
return( 
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<Slider style={baseStyle} 

disabled={false} 

maximumTrackTintColor="red" 

minimumTrackTintColor="blue" 

onSlidingComplete={ (value)=>{ 
console.log("slider finish",value); 

}} 

onValueChange={ (value)=>{ 
console.log("slider change",value); 

}} 

step={0.1}/> 

); 
} 


Slider 组 件 支持 的 属性 如 表 6-10 所 示 。 
表 6-10 Slider 组 件 可 设置 的 属性 
































属性 名 解释 平台 值 类 型 或 可 选 值 
布尔 值 
disabled 设置 组 件 是 否 可 用 通用 。 true: 组 件 不 可 交互 
。 false: 组 件 可 交互 
maxmumTrackTintColor 和 tie 通用 特定 格式 的 颜色 字符 串 
minimumTrackTintColor Dp ie 通用 特定 格式 的 颜色 字符 串 
用 户 滑动 结束 后 会 回调 此 属性 通用 函数 ， 会 将 Slider 组 件 当前 的 值 作 
设置 的 函数 为 参数 传递 进来 
组 改变 时 函数 ， 会 将 Slider 组 件 当前 的 值 作 
0 = 件 的 值 改 变 时 调用 的 通用 a 
step 设置 最 小 步 长 通用 数值 
thumbImage 设置 滑 块 图 片 通用 静态 图 片 
trackImage 设置 轨道 图 片 通用 静态 图 片 
value 设置 滑 块 的 初始 值 通用 数值 
maximumTrackImag 设置 滑 块 右 侧 轨道 的 背景 图 iOS 静态 图 片 
minimumTrackImage 设置 滑 块 左 侧 轨道 的 背景 图 ioOS 静态 图 片 
maximumValue 设置 滑 块 的 最 大 值 iOS 数值 ， 默 认为 1 
minimum Value 设置 滑 块 的 最 小 值 iOS 数值 ， 默 认为 0 
thumTintColor 设置 滑 块 的 背景 颜色 Android 特定 格式 的 颜色 字符 串 
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6.6 ”ActivityIndicator 指示 器 组 件 的 应 用 


在 体验 优秀 的 应 用 程序 中 ， 我 们 经 常会 看 到 各 式 各 样 的 指示 器 ， 例 如 在 某 些 下 载 任务 、 数 据 
存储 或 加 载 任务 执行 时 ， 界面 上 都 会 显示 一 些 等 待 特 效 。 在 React Native 中 提供 了 ActivityIndicator 
跨 平 台 组 件 来 创建 活动 指示 器 。 

在 HelloWorld 工程 的 Demo 文件 夹 下 新 建 一 个 命名 为 ActivityIndicatorDemo.js 的 文件 ， 在 其 
中 编写 如 下 代码 : 


import React, {Component} from ‘react'; 
import {ActivityIndicator} from 'react-native'; 
export default class ActivityIndicatorDemo extends Component{ 
render (){ 
return( 
<ActivityIndicator style={baseStyle} 
animating={true} 
color="red" 
size='large'/> 


} 

let baseStyle = { 
marginHorizontal:0, 
top:100 

} 


修改 index.iosjs 与 index.Android.js 文件 如 下 : 


import React, { Component } from 'react'; 
import { 

AppRegistry 
} from 'react-native'; 
import ActivityIndicatorDemo from './Demo/ActivityIndicatorDemo'; 
export default class HelloWorld extends Component { 

render() { 

return (<ActivityIndicatorDemo />); 


} 
AppRegistry.registerComponent ('HelloWorld', () => HelloWorld); 

运行 工程 ， 可 以 看 到 在 iOS 平台 与 Android 平台 中 ActivityIndicator 的 表现 略 有 不 同 。 
ActivityIndicator 组 件 支 持 的 属性 如 表 6-11 所 示 。 
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表 6-11 ActivityIndicator 组 件 支持 的 属性 





























属性 名 解释 平台 值 类 型 或 可 选 值 
animating 开启 动画 通用 布尔 值 
color 设置 指示 器 的 颜色 通用 特定 格式 的 颜色 字符 串 
特定 的 字符 串 
Size 设置 指示 器 的 尺寸 通用 。 small: 小 指示 器 
。 large: 大 指示 器 
3 设置 没有 动画 的 时 候 是 否 自动 隐藏 指示 器 | . i 
hidesWhenStopped CAndroid 平台 自动 隐藏 ) iOS 布尔 值 


6.7 Textlnput 用 户 输入 组 件 的 应 用 


用 户 输入 也 是 交互 的 一 种 ， 这 种 场景 在 实际 开发 中 也 经 常会 使 用 到 。 例 如 ， 在 登录 注册 相关 
的 界面 免不了 需要 用 户 输入 一 些 信息 。 TextInput 便 是 专门 用 来 处 理 用 户 输入 的 组 件 。 在 HelloWorld 
[ 程 的 Demo 文件 夹 下 面 新 建 一 个 命名 为 TextInputDemo.js 的 文件 ， 在 其 中 编写 如 下 测试 代码 : 


import React, {Component} from 'react'; 
import {TextInput} from 'react-native'; 
export default class TextInputDemo extends Component{ 
render(){ 
return( 
<TextInput style={baseStyle} 
> 
Dy 


} 

let baseStyle = { 
top:100, 
marginLeft:30, 
marginRight:30, 
height:100, 
borderWidth:1, 
borderColor:'gray'" 

} 


修改 index.iosjs 文件 与 index.Android.js 文件 如 下 : 
import React, { Component } from 'react'; 
import { 


AppRegistry 
} from 'react-native'; 
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import TextInputDemo from './Demo/TextInputDemo'; 
export default class HelloWorld extends Component { 
render() { 
return (<TextInputDemo />); 
} 


AppRegistry.registerComponent ('HelloWorld', () => HelloWorld); 


上 面 代码 创建 了 一 个 简单 的 文本 输入 框 , 默认 的 TextInput 是 单行 输入 的 , 并 且 其 style 属性 可 
定义 的 风格 与 Text 组件 完 全 一 致 。 需要 注意 ， 在 iOS 平台 上 的 TextInput 组 件 默认 无 任何 边框 ,在 
Android 平台 上 TextInput 组 件 会 默认 带 底线 ， 可 以 通过 相关 属性 的 设置 来 去 掉 这 些 差异 。 

运行 工程 ， 效 果 如 图 6-19 所 示 。 


dsdsdsdadsdsdasdasdasdsadisd 





图 6-19 Textmput 组 件 
TextInput 组 件 中 可 以 进行 配置 的 属性 如 表 6-12 所 示 。 
表 6-12 Textlnput 组 件 的 属性 


属性 名 解释 BA) 值 类 型 或 可 选 值 
特定 枚 举 字符 串 

。 characters: 所 有 字符 转换 大 写 
TextInput 指定 字符 自动 通用 。 words 单词 首 字母 大 写 
。 sentences: 句 首 大 写 

。 none: 不 自动 转换 大 写 
布尔 值 

autoCorrect 是 否 开启 自动 拼写 检查 通用 ， true: 开启 ， 默 认为 true 
。 false: 不 开启 

布尔 值 

autoFocus 是 否 自动 获取 焦点 通用 ， true: 自动 获取 

” false: 不 自动 获取 
设置 是 否 在 回 车 提交 时 失 布尔 值 

blurOnSubmit 焦 ， 单 行 输入 组 件 默认 是 ， | 通用 ， true: 回 车 失 焦 

多 行 输入 组 件 默 认 否 。 false: 回 车 不 失 焦 


autoCapitalize 
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( 续 表 ) 
属性 名 解释 平台 值 类 型 或 可 选 值 
设置 是 否 隐藏 光标 〈 目 前 只 和 人 
caretHidden 在 贡 8 平 全 省 小》 ”| 通用 。 true: 隐藏 光标 
时 。 false: 不 隐藏 
defaultValue 提供 文本 输入 组 件 的 初始 值 | 通用 字符 串 
5 a 布尔 值 
editable nn 通用 ， true: 可 编辑 
。 false: 不 可 编辑 
枚 举 字符 串 
。 default， 默认 键盘 
keyboardType 设置 弹出 键盘 的 类 型 通用 。 numeric， 数 组 键盘 
*。 email-address: 邮件 键盘 
We 设置 文本 框 最 多 可 输入 的 字 通用 数值 
符 数 
布尔 值 
multiline 设置 是 否 支持 多 行文 本 通用 。， true: 支持 多 行文 本 
。 false: 单行 文本 
设置 当 文 本 输入 组 件 失去 焦 | 、 
onBlur 点 时 调用 的 回调 通用 函数 
设置 当 文本 输入 组 件 变化 时 | 、 
onChange 调用 的 回调 通用 函数 
oe 设置 当 文本 输入 组 件 内 容 变 通用 函数 , 会 将 改变 后 的 文字 内 容 作 为 
, 化 时 调用 的 回调 参数 传递 进来 
设置 当 文本 输入 结束 后 调用 | 、 
onEndEditing 的 回调 通用 函数 
设置 当 文 本 输入 组 件 获 得 焦 | 、 
onFocus 点 时 调用 的 回调 通用 函数 
a 当 组 件 挂 载 完 成 或 者 布局 改 通用 函数 ， 传 入 的 参数 格式 为 
2 变 时 调用 的 回调 Deywidth,height} 
会 将 滚动 位 置 出 
当 文本 输入 组 件 为 多 行 模式 ee 
onScroll 时 ， 发 生 滚动 行为 会 调用 此 | 通用 
， { nativeEvent: { contentOffset: { x, 
轩 光 3 
函数 , 参数 会 将 选中 的 字符 范围 以 
当选 中 的 文字 改变 时 调用 的 | 、 如 下 格式 传 入 : 
ee 回调 bid { nativeEvent: { selection: { start, 
end}}} 
当 用 户 按 下 回 车 键 时 调用 的 
onSubmitEditing 回调 (如 果 是 多 行 模式 ， 则 | 通用 函数 








此 属性 无 效 ) 
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属性 名 


解释 


平台 


( 续 表 ) 
值 类 型 或 可 选 值 





placeholder 


如 果 没 有 任何 文字 输入 ， 则 
会 显示 这 个 属性 的 值 


通用 


字符 串 





placeholderTextColor 


默认 显示 文字 的 文字 颜色 


通用 


特定 格式 的 颜色 字符 串 





retumKeyType 


secureTextEntry 


回 车 键 显 示 的 文案 


设置 是 否 密 文 输入 


通用 


通用 


枚 举 字符 串 : 
通用 : 

» done 

» go 

” next 

» search 

» send 

安 卓 : 

» none 

» previous 
苹果 : 

» default 

» emergency-call 
» google 

» join 

» route 

» yahoo 

布尔 值 

。 true: 密 文 输入 
。 false: 明文 输入 





selectTextOnFocus 


设置 是 否 获取 焦点 的 时 候选 
中 所 有 文字 


通用 


布尔 值 





selection 


selectionColor 


设置 选中 文字 
设置 文字 选中 区 域 的 颜色 





通用 
通用 


如 下 格式 的 对 象 ; 
{start:number,end:number} 


特定 格式 的 颜色 字符 串 





value 


文本 框 中 的 文字 内 容 


通用 


这 个 属性 如 果 设置 , 组件 中 的 文本 
将 一 直 与 这 个 值 保持 一 臻 





inlineImasgeLe 信 


设置 组 件 左 侧 图 片 


Android 


本 地 图 片 引用 





underlineColorAndroid 


设置 文本 组 件 的 下 画 线 颜色 


Android 


特定 格式 的 颜色 字符 串 





numberOfLines 


设置 文本 输入 组 件 的 行 数 


Android 


数值 





inlineImagePadding 


设置 图 片 与 组 件 间 的 距离 


Android 


数值 





clearButtonMode 





设置 文本 输入 组 件 右 侧 是 否 
显示 “清除 ”按钮 





iOS 





枚 举 字符 串 : 

。， never: 永 不 显示 

。 while-editing: 编辑 时 显示 

。 unless-editing: 非 编辑 时 显示 
。 always: 始终 显示 
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( 续 表 ) 
属性 名 解释 平台 值 类 型 或 可 选 值 
clearTextOnFocus ea iOS 布尔 值 
设置 当 组 件 中 没有 文字 时 是 | . i 

enablesRetumKeyAutomatically 否 禁 用 确认 按钮 iOS 布尔 值 ， 默 认为 false 

枚 举 字符 串 : 

。 phoneNumber: 电话 

。 link: 链接 
dataDetectorTypes 设置 文本 中 链接 的 模式 iOS ， address: 地 址 

。 calendarEvent: 日 历 事件 

。 none: 无 

。 all: 全 部 

枚 举 字符 串 ， 

。 default; 默认 

keyboardAppearance 设置 键盘 的 颜色 iOS 。light: 亮色 

， dark: 上 暗色 

Ne 函数 ， 会 在 onChange 之 前 调用 ， 

onKeyPress ee iOS 传 入 的 参数 格式 为 : 

{ nativeEvent: { key: keyValue } } 

TextInput 组 件 也 提供 了 两 个 实例 方法 ， 用 来 操作 组 件 本 身 ， 定 义 如 表 6-13 所 示 。 





表 6-13 Textinput 组 件 的 两 个 实例 方法 


方法 名 


isFocused 





清空 当前 文本 输入 组 件 的 内 容 


实例 方法 应 用 实例 如 下 : 
return( 
<TextInput style={baseStyle} 
autoCapitalize={'words'} 
autoCorrect={false} 
autoFocus={true} 
caretHidden={true} 
defaultValue="HelloWorld" 
multiline={false} 
onBlur={ ()=>{ 
console.log('onBlur'); 
}} 
onChangeText={ (text)=>{ 
console.log (text); 
}} 
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onEndEditing={f ()=>{ 
console.log (this.refs.textinput.isFocused()); 
this.refs.textinput.clear (); 

寺 

onFocus={ ()=>{ 
console.log("focus"); 

号 

onScroll={({ nativeEvent: { contentOffset: { x, y } } })=>{ 
console.log (x,y); 

下 

selection={{start:0,end:5}} 


selectionColor='red' 


keyboardAppearance={'dark'} ref="textinput"/> 


上 面 示例 代码 中 使 用 到 了 ref 这 个 属性 ， 这 个 属性 可 以 为 组 件 设置 标识 ， 其 承载 类 对 象 可 以 
通过 refs 属性 获取 到 对 应 的 组 件 实例 。 这 种 获取 组 件 实例 的 方法 在 开发 中 将 大 量 使 用 。 





6.8 _ StatusBar 状态 栏 组 件 的 应 用 





无 论 是 iOS 还 是 Android 平台 , 在 屏幕 的 最 上 方 都 默认 显示 一 个 状态 栏 。 所 谓 状 态 栏 ， 其 实 就 
是 显示 时 间 、 网 络 、 电 量 等 设备 信息 的 地 方 。 在 React Native 中 ，StatusBar 组 件 用 来 操作 状态 栏 。 
需要 注意 的 是 ，StatusBar 组 件 可 以 在 多 个 地 方 使 用 ， 但 状态 栏 永 远 只 有 一 个 ， 后 设置 的 StatusBar 
会 将 先 设置 的 覆盖 。 

打开 HelloWorld 工程 ， 在 Demo 文件 夹 下 新 建 一 个 命名 为 StatusBarDemo.js 的 文件 ， 在 其 中 
编写 如 下 测试 代码 : 


import React, {Component} from 'react'; 





import {StatusBar,Button,View} from "react-native' 7 
export default class StatusBarDemo extends Component{ 
constructor (props){ 
super (props); 
this.state = { 
hidden:false 


} 

} 

render (){ 
return( 


<View> 
<StatusBar ref="status" 
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hidden={fthis.state.hidden} 
animated={true} 
backgroundColor="'red"' 
translucent={true} 
barSstyle={'dark-content'} 
showHideTransition={'slide'}/> 
<Button tit1le="button" 
style={ {top:100}} 
onPress={ ()=>{ 

this.setState({ 

hidden:! (this.refs.status.props.hidden) 
}); 

console.log(StatusBar.currentHeight); 
i> 
</View> 


修改 index.iosjs 与 index.Android.js 文件 如 下 : 
import React, { Component } from 'react'; 
import { 
AppRegistry 
} from 'react-native'; 
import StatusBarDemo from './Demo/StatusBarDemo'; 
export default class HelloWorld extends Component { 
render() { 
return (<StatusBarDemo />); 


} 

AppRegistry.registerComponent ('HelloWorld', () => HelloWorld); 

上 面 的 示例 代码 实现 了 一 个 小 行为 ， 当 用 户 单 击 按钮 时 ， 状 态 栏 会 切换 显 隐 状态 ， 并 且 有 一 
个 动画 特效 。 

StatusBar 组 件 提供 给 了 我 们 一 个 静态 属性 ( 见 表 6-14) ， 可 以 直接 使 用 类 名 来 进行 调用 。 

表 6-14 StatusBar 组 件 的 静态 属性 
静态 属性 解释 备注 

currentHeight 获取 状态 栏 的 高 度 在 iOS 平台 ， 状 态 栏 高 度 都 为 20 














StatusBar 中 提供 的 常用 属性 如 表 6-15 所 示 。 
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表 6-15 StatusBar 的 常用 属性 











属性 名 解法 平台 什 类 型 或 可 选 信 
状态 栏 的 变化 是 否 以 动画 的 形式 呈 | 。 本 
ee 现 ， 包 括 显 隐 、 背 景色 、 风 格 的 变化 | 通用 Ws 
hidden 设置 是 否 隐藏 状态 栏 通用 布尔 值 
枚 举 字符 
barStyle 设置 状态 栏 风格 通用 i 


， light-content: 内 容 为 白色 
， dark-content; 内 容 为 黑色 




















backgroundColor 设置 状态 栏 背景 色 Android 特定 格式 的 颜色 字符 串 
translucent 设置 状态 栏 是 否 为 沉浸 式 Android 布尔 值 
Re 设置 是 否 显示 网 络 提示 符 ios 布尔 值 
Visible 

枚 举 字符 串 
showHideTransition 设置 显 隐 状态 栏 时 的 动画 效果 iOS ， fade: 渐 隐 渐 现 

。 slide: 收入 收 出 


6.9 Picker 选择 堪 组 件 的 应 用 


Picker 组 件 是 React Native 中 一 个 跨 平 台 的 选择 器 控件 ， 对 于 某 些 例如 城市 选择 、 日 期 选择 、 
性 别 选择 等 需求 ， 使 用 这 个 组 件 美观 而 实用 。 

在 HelloWorld 工程 的 Demo 文件 夹 下 新 建 一 个 命名 为 PickerDemojjs 的 文件 , 在 其 中 编写 如 下 
测试 代码 : 


import React, {Component} from 'react'; 
import {Picker} from '‘'react-native'; 
export default class PickerDemo extends Component{ 
constructor (props){ 
super (props); 
this.state = { 
value:1 


} 
render (){ 
return( 
<Picker style={{top:100,marginLeft:30,marginRight:30, 
height:100}} 
onValueChange={ (itemValue, itemPosition)=>{ 
console.log (itemValue, itemPosition); 
this.setState({ 
value:itemPosition 
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Ds; 

}} 

selectedValue={this.state.value} 

mode={'dialog'} 

itemStyle={{fontSize:24}} ref='picker'> 
<Picker.Item label="iOS" value={0} color='red'/> 
<Picker.Item label="Android" value={1} color='blue'/> 
<Picker.Item label="Web" value={2} color='green'/> 

</Picker> 


} 

注意 ，Picker 组 件 是 一 个 受 控 组 件 ， 即 其 表现 的 状态 只 与 selectedValue 属性 有 关 ， 用 户 的 操 
作 并 不 能 修改 Picker 组 件 的 值 。 

将 index.iosjs 与 index.Android,js 文件 修改 如 下 : 








import React, { Component } from 'react'; 
import { 
AppRegistry 
} from 'react-native'; 
import PickerDemo from './Demo/PickerDemo'; 
export default class HelloWorld extends Component { 
render() { 
return (<PickerDemo />); 


} 
AppRegistry.registerComponent ('HelloWorld', () => HelloWorld); 


运行 工程 ，Picker 组 件 在 iOS 平台 与 Android 平台 的 呈现 分 别 如 图 6-20 与 图 6-21 所 示 。 





图 6-20 iOS 平 台 的 Picker 组 件 图 6-21 Android 平台 的 Picker 组 件 
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Picker 组 件 在 使 用 时 需要 使 用 双 标 签 ， 其 内 部 组 合 PickerItem 来 表示 选择 器 中 的 每 一 行 数据 。 
Picker 组 件 可 以 设置 的 属性 如 表 6-16 所 示 。 


表 6-16 Picker 组 件 可 以 设置 的 属性 











属性 名 解释 平台 值 类 型 或 可 选 值 
selectedValue 选中 的 值 通用 字符 串 或 数值 
style 设置 布局 样式 通用 样式 对 象 
函数 ， 参 数 如 下 : 


onValueChange 当 用 户 操作 值 改 变 时 调用 的 回调 通用 itemValue: item 对 应 的 值 


itemPosition: item 对 应 的 位 置 

















enabled 是 否 可 以 进行 用 户 交互 Android 布尔 值 
枚 举 字符 串 
mode 设置 选择 器 样式 Android dialog: 对 话 框 演示 
dropdown: 下 拉 框 样式 
prompt 设置 提示 字符 串 Android 字符 串 
itemStyle 指定 Item 的 布局 样式 iOS 样式 对 象 


实际 上 ，Picker.item 也 是 一 个 独立 的 类 ， 用 来 创建 选择 器 组 件 中 每 条 具体 数据 的 呈现 载体 ， 其 
中 可 进行 设置 的 属性 如 表 6-17 所 示 。 


表 6-17 Pickeritem 组 件 可 以 设置 的 属性 


| | | 
label 通用 字符 和 

value 通用 字符 申 或 数值 

color 通用 特定 的 颜色 字符 中 





6.10 “Modal 模 态 视图 组 件 的 应 用 


Modal 模 态 视图 是 React Native 中 一 个 十 分 强大 的 跨 平 台 容器 视图 ， 你 可 以 使 用 它 任意 组 合 其 
他 组 件 来 创建 自 定义 的 对 话 框 。 在 HelloWorld 工程 的 Demo 文件 夹 下 面 创 建 一 个 命名 为 
ModalDemo.js 的 文件 ， 在 其 中 编写 如 下 代码 : 


import React, {Component} from ‘react'; 
import {Modal,Text,View,Button} from 'react-native'; 
export default class ModalDemo extends Component{ 
constructor (props){ 
super (props); 
this.state = { 
hidden:true 
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render (){ 
return( 
<View> 
<Modal visible={!this.state.hidden} 
transparent={false} 
animationType={'slide'} 
onRequestClose={ ()=>{ 
console.log('close'); 
}} 
onShow={ ()=>{ 
console.log('onShow'); 
Wn 
supportedOorientations={['portrait',"'portrait-upside-down', 'landscape', 
'landscape-left', 'landscape-right']} 
onOrientationChange={ ()=>{ 
console.1log ("onOrientationChange"); 
}} 
hardwareAccelerated={true} 
> 
<Text style={{top:150,textAlign:'center'}}>I'ma 
Modal!</Text> 
<View style={{top:180}}> 
<Button title="Close" 
onPress={ ()=>{ 
this.setState({ 
hidden:true 
]}) 7 
Ev 
</View> 
</Modal> 
<View style={{top:30}}> 
<Text style={{textAlign:'center',fontSize:22}}>Hello 
Modal!</Text> 
<Button title="Show Modal" 
onPress={ ()=>{ 
this.setState({ 
hidden:false 
]) 7 
EF/> 
</View> 
</View> 
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注意 ，Modal 视图 会 覆盖 在 当前 界面 的 最 上 层 ， 上 面 的 示例 代码 中 ，onRequestClose 属性 比较 
特殊 ， 当 接收 到 Modal 视图 的 关闭 请 求 时 会 被 调用 〈 并 非 隐藏 ) 。 在 Android 平台 上 这 个 属性 是 必 
须 提供 的 ， 当 用 户 单 击 Android 设备 的 返回 键 时 ， 这 个 属性 设置 的 回调 会 被 调用 。Modal 模 态 视图 
常用 属性 如 表 6-18 所 示 。 





表 6-18 ”Modal 模 态 视 图 常用 属性 














属性 名 解释 平台 值 类 型 或 可 选 值 
枚 举 字符 串 
animationType 设置 模 态 视图 显示 时 的 动画 效果 | 通用 slide: 切入 切 出 
fade: 渐 隐 渐 现 
onRequestClose 当 接 收 到 关闭 请 求 时 调用 的 回调 | 通用 函数 ， 在 Android 平台 为 必需 
onShow 当 模 态 视图 显示 时 调用 的 回调 通用 函数 
布尔 值 
transparent 设置 模 态 视图 是 否 覆 盖 背 景 通用 true: 模 态 视图 背景 透明 
false: 模 态 视图 背景 不 透明 
visible 设置 模 态 视图 是 否 可 见 通用 布尔 值 


hardwareAccelerated ”| 设置 是 否 硬 件 加 速 Android | 布尔 值 
枚 举 字符 串 数 组 ， 下 面 是 可 选择 的 值 


‘portrait,, 'portrait-upside-down', 





supportedOrientations | 设置 支持 的 屏幕 方向 iOS 和 a 
"landscape-right' 
a 模 态 框 显 示 时 屏幕 方向 发 生 改 变 | . 函数 ， 只 有 当 水 平和 竖 直 方向 切换 时 
onOrientationChange iOS 











调用 的 回调 





会 调用 

注意 ， 在 iOS 平台 中 ， 应 用 是 否 支持 横竖 屏 的 切换 是 需要 在 工程 的 Info.plist 文件 中 进行 配置 
的 ， 使 用 Xcode 打开 iOS 工程 ， 在 其 中 的 Info.plist 文件 中 添加 如 图 6-22 中 所 示 的 键 值 。 (图 6-22 
中 设置 了 支持 Home 键 在 下 、Home 键 在 左 和 Home 键 在 右 3 种 设备 方向 。) 





¥ Supported interface orientations $ Array (3 items) 
ltem0 String Portrait (bottom home button) 
ltem 1 String Landscape (left home button) 
ltem 2 String Landscape (right home button) 





图 6-22 在 Info.plist 文件 中 配置 设备 支持 的 方向 
6.11 ” KeyboardAvoidingView 组 件 的 应 用 


React Native 中 的 KeyboardAvoidingView 并 不 是 一 个 十 分 完善 的 组 件 , 其 设计 的 初 囊 是 为 了 解 
决 在 移动 设备 上 当 有 键盘 弹出 时 视图 可 以 自 适应 地 调整 位 置 。KeyboardAvoidingView 是 一 个 容器 
组 件 , 其 中 放 入 的 视图 组 件 在 键盘 弹出 时 会 根据 键盘 的 高 度 进行 自 适应 的 位 置 调整 。 在 HelloWorld 
工程 中 的 Demo 文件 夹 下 新 建 一 个 KeyboardAvoidingViewDemojs 的 文件 ， 编 写 如 下 代码 : 
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import React, {Component} from 'react'; 

import {KeyboardAvoidingView,TextInput,View,Button} from 'react-native'; 

export default class KeyboardAvoidingViewDemo extends Component{ 

render (){ 
return( 
<View style={{justifyContent:'flex-end',bottom:0,flex:1}}> 
<Button title="TEX' 
console.1log(" 

}}/> 
<KeyboardAvoidingView behavior={'position'}> 





onPress={ ()=>{ 
HW 





<TextInput style={{borderWidth:1,borderColor:'gray', 
height:30}}/> 
</KeyboardAvoidingView> 
</View> 
); 


l 


上 面 的 示例 代码 创建 了 一 个 Button 组 件 和 一 个 KeyboardAvoidingView 组 件 ， 修 改 index.iosjs 
与 index.Android.js 文件 后 在 iOS 平台 运行 项 目 。 默认 界面 与 键盘 弹出 时 的 界面 如 图 6-23 与 图 6-24 
所 示 。 
















QIWIEIRITIYIVITIONP 
ASDFGHJKL 
4 zxcvenNM 赂 
TEXT 
图 6-23 默认 状态 下 的 输入 框 图 6-24 键盘 弹出 时 的 输入 框 


你 可 能 已 经 发 现 了 ， 输 入 框 跟随 键盘 的 弹出 进行 了 移动 ， 但 是 按钮 组 件 并 没有 移动 。 我 们 可 
以 通过 设置 KeyboardAvoidingView 组 件 的 behavior 属性 为 padding 来 实现 所 有 输入 框 组件 上 面 的 
组 件 一 起 移动 的 效果 。 

KeyboardAvoidingView 组 件 支持 的 属性 见 如 表 6-19 所 示 。 
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表 6-19 KeyboardAvoidingView 组 件 支持 的 属性 





属性 名 解释 Es 值 类 型 或 可 选 值 

枚 举 字符 串 

。 height， 高 度 模式 ， 这 种 模式 
下 ， 组 件 不 随 键盘 做 适应 

。 position: 这 种 模式 下 ， 组 件 











behavior 定义 行为 通用 会 随 着 键盘 的 状态 改变 位 置 
。 padding: 这 种 模式 下 ， 组 件 
会 随 着 键盘 的 状态 调整 自己 
的 padding 
当 组 件 的 行为 设置 为 position 模式 时 ， 


contentContainerStyle “| 会 自动 创建 一 个 内 容 容 器 视图 , 这 个 属 | 通用 style 风格 对 象 
性 设置 内 容 视图 容器 视图 的 style 

这 个 属性 用 于 距离 调整 的 补偿 ， 例 如 ， 
组 件 可 能 本 来 就 距离 界面 下 方 有 一 定 
keyboardVerticalOffset | 距离 , 键盘 弹出 时 默认 会 将 组 件 的 位 置 | 通用 数值 
修改 为 一 个 键盘 高 度 的 距离 , 设置 这 个 
值 可 以 补偿 距离 


注意 ，keyboardVerticalOffset 属性 有 用 ,很 多 情况 下 ,我 们 的 输入 组 件 并 不 一 定 是 紧 贴 界 
面 底部 的 ， 通 过 这 个 补偿 距离 可 以 完美 地 控制 组 件 的 位 置 适应 ， 示 例如 下 : 


render (){ 

















return( 
<View style={{justifyContent:'flex-end',bottom:10,flex:1}}> 
<Button title='TEXT' onPress={ ()=>{ 
Console.1og("===") 
和 > 
<KeyboardAvoidingView behavior={'padding'} 
keyboardVerticalOffset={10} 
> 
<TextInput style={{borderWidth:1,borderColor:'gray', 
height:30}}/> 
</KeyboardAvoidingView> 
</View> 


在 本 节 的 开始 就 提 到 ，KeyboardAvoidingView 组 件 并 不 是 一 个 非常 完善 的 组 件 ， 在 iOS 平 


台 其 表现 很 好 , 但 在 Android 平台 则 因 系 统 版 本 的 不 同 造成 很 大 差异 ， 后 面 将 会 介绍 如 何在 
项 目 中 根据 不 同 平台 来 适 配 代码 。 继 续 学 习 ， 你 一 定 会 开发 出 极 佳 体验 的 跨 平台 移动 应 用 。 
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6.12 ”WebView 网 页 组 件 的 应 用 





无 论 是 在 iOS 平台 还 是 Android 平台 ，WebView 都 是 一 种 十 分 重要 的 网 页 视图 控件 。 有 了 
WebView 的 支持 ， 应 用 程序 的 内 容 会 更 加 丰富 灵活 。 在 React Native 中 提供 了 跨 平台 的 WebView 
组 件 来 进行 网 页 视图 的 泻 染 。 


6.12.1 WebView 常用 属性 解析 


在 HelloWorld 工程 的 Demo 文件 夹 下 新 建 一 个 命名 为 WebViewDemo.js 的 文件 。 在 其 中 编写 
如 下 代码 : 


import React, {Component} from 'react'; 

import {WebView} from '‘'react-native'; 

export default class WebViewDemo extends Component{ 

render (){ 
return( 

<WebView source={{uri:'https://www.baidu.com'}} 
bounces={false} 
dataDetectorTypes={['link']} 
decelerationRate={'normal'} 
domStorageEnabled={true} 
injectedJavaScript="var a = 100;" 
scalesPageToFit={true}/> 
) 7 


} 

上 面 的 代码 在 界面 中 创建 了 一 个 WebView 视图 ， 默 认 加 载 百 度 
网 站 的 首页 ,修改 index.iosjs 文件 与 index.Android.js 文件 后 运行 工程 ， 
效果 如 图 6-25 所 示 。 


Ea Z35PM | 


0 
Bai 交 百度 


当 麦 迪 、 科 比 、 希 姆 斯 、 哈 登 换 上 同 
一 款 发 型 ， 哪 个 最 帅 ? 


i aN d 


性 感 大 胸 运动 美女 ， 爆 乳 客居 诱惑 私 
房 写真 


TN 
i sma 








图 6-25 ”WebView 组 件 效果 
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如 果 加 载 的 网 页 是 HTTP 协议 的 ， 在 iOS 平台 需要 设置 工程 的 Info.plist 文件 使 其 支持 ， 关 
于 这 部 分 内 容 在 Image 组 件 一 节 有 介绍 ， 如 果 忘 记 了 ， 可 以 翻 回去 查看 。 








WebView 组 件 的 soure 属性 除了 可 以 加 载 一 个 网 址 外 ， 还 可 以 加 载 本 地 的 HTML 文件 或 者 
HTML 字符 串 ， 找 一 个 网 页 保存 为 HTML 文件 ， 将 其 放 入 React Native 工程 的 source 文件 夹 下 ， 
修改 WebViewDemo 类 的 render 方法 如 下 : 


render (){ 
return( 

<WebView source={require('./../source/test.html')} 
bounces={false} 
dataDetectorTypes={['link']} 
decelerationRate={'normal'} 
domStorageEnabled={true} 
injectedJavaScript="var a = 100;" 
scalesPageToFit={true}/> 
jy 

} 


运行 工程 ， 会 看 到 HTML 文件 中 的 内 容 被 解析 成 了 WebView 网 页 。 使 用 HTML 字符 串 加 载 
网 页 视图 的 逻辑 也 一 样 ， 这 里 就 不 再 演示 了 ， 在 表 6-20 的 属性 列表 中 有 详细 的 用 法 介绍 。 


表 6-20 WebView 的 属性 


EEE 














Be 在 加 载 网 页 之 前 注入 
injectedJavaScript 一 段 JavaSeript 代码 字符 串 
设置 网 页 中 的 视频 是 
oo 否 接收 到 用 户 交 互 后 | 通用 布尔 什 
UserAction Ne 
再 进行 播放 
ei 设置 是 否 把 网 页 缩放 布尔 值 

ScalesPageIoFi 到 合适 比例 小 

可 以 有 3 种 设置 方式 

(1) 设置 为 网 页 地 址 ， 格 式 如 下 : 
{uri: string, method: string, headers: object, 
body: string} 

Source 设置 网 页 资源 其 中 ，method 设置 请 求 方式 ， 可 选 “GET” 
与 “POST”，headers 设置 请 求 头 内 容 ，body 
设置 请 求 体 。 

(2) 使 用 require 方法 引入 本 地 HTML 资源 
(3) {html: string, baseUrl: string} 
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( 续 表 ) 
属性 名 解释 值 类 型 或 可 选 值 
是 否 强制 在 加 载 时 显 
startInLoadingState 示 loading 组 件 布尔 值 
style UI 风格 和 View 组 件 一 致 
设置 视频 在 网 页 中 直 
allowsInlineMediaPlayback | 接 播放 或 跳 转 原生 播 布尔 值 
放 器 
设置 网 页 视图 是 否 有 . 
bounces 回 弹 效果 布尔 值 
这 个 属性 可 以 将 电话 、 地 址 、 日 历 等 信息 进 
行 探测 , 添加 超 链 接 。 可 以 设置 为 数组 对 象 ， 
其 中 可 选 枚 举 如 下 : 
。 phoneNumber: 电话 号 
dataDetectorTypes ee 。 link: 链接 
。， address: 地 址 
。 calendarEvent: 日 历 事件 
。 none: 无 探测 
。 all: 全 部 探测 
枚 举 字符 串 
decelerationRate 设置 滑动 速度 。 normal: 正常 速度 
fast; 快速 
scrollEnabled 是 否 允 许 滑 动 | ios | 布尔 什 
domStorageEnabled A DM 布尔 值 
JavaScriptEnabled i JavaScript 布尔 值 
设置 WebView 的 
userAgent ee ep 字符 串 
除了 上 面 提 到 的 属性 外 ，WebView 组 件 中 还 有 两 个 十 分 强大 的 属性 ， 分 别 用 来 设置 网 页 视图 
加 载 时 的 等 待 视图 和 网 页 加 载 出 错 的 提示 视图 ， 如 表 6-21 所 示 。 
表 6-21 WebView 组 件 的 属性 
属性 名 值 类 型 或 可 选 值 
设置 一 个 函数 ， 用 于 显示 加 载 网 页 ee ee 
TrenderError 出 错时 的 提示 视图 函数 ， 需 要 返回 一 个 组 件 
设置 一 个 函数 ， 用 于 显示 网 页 加 载 函数 , 需要 返回 一 个 组 件 , 默认 将 返回 一 个 
8 | 过 程 中 的 等 待 视图 居中 的 ActivityIndicatorView 组 件 
示例 代码 如 下 : 
render (){ 
return( 

















<WebView source={{uri:'https://www.baidu.com'}} 


bounces={false} 
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dataDetectorTypes={['link']} 
decelerationRate={'normal'} 
domStorageEnabled={true} 
injectedJavaScript="var a = 100;" 
scalesPageToFit={true} 
startInLoadingState={true} 
renderLoading={ ()=>{ 
return( 
<Text>Loading</Text> 
); 
3 
renderError={ ()=>{ 
return( 
<Text>Load Error</Text> 
); 
Ri 


6.12.2 ”WebView 加 载 过 程 监听 相关 属性 


监听 WebView 的 加 载 过 程 十 分 有 必要 ， 有 时 候 我 们 甚至 需要 拦截 某 些 请 求 来 进行 定制 化 的 罗 


辑 处 理 。 表 6-22 所 示 的 WebView 组 件 属 性 用 来 监听 网 页 的 加 载 过 程 。 


表 6-22 WebView 组 件 中 用 来 监听 网 页 加 载 过 程 的 属性 












网 页 加 载 出 错时 调用 的 回调 
onLoadStart 


网 页 加 载 完 成 时 调用 的 回调 ,无 


onLoadEnd 论 是 否 成 功 


通用 | 函数 
网 页 开始 加 载 时 调用 的 回调 通用 | 函数 
网 页 加 载 成 功 时 调用 的 回调 通用 | 函数 


值 类 型 或 可 选 值 


通用 | 函数 



































onNavigationStateChange 网 页 导航 发 生变 化 时 调用 的 回调 | 通用 | 函数 
函数 ， 需 要 返回 一 个 布尔 值 ， 如 
onShouldStartLoadWithRequest | 网 页 发 起 请 求 时 调用 的 回调 iOS “| 果 返 回 false 则 不 允许 此 次 请 求 ， 
返回 tmue 则 表示 人 允许 





在 iOS 原生 开发 中 ， 经 常 使 用 到 WebView， 在 原生 与 WebView 之 间 


需求 ， 一 种 解决 方案 是 拦截 WebView 的 请 求 url 进行 
onShouldStartLoadWithRequest 
可 以 通过 获取 其 中 的 url 来 进行 协议 解析 ， 示 例如 下 : 


render () { 





return( 








经 党 


会 遇 到 数据 互 传 的 





协议 解析 ， 这 就 用 到 


属性 所 对 应 的 回调 了 , 这 个 属性 对 应 的 函数 中 会 传 入 一 个 Web 对 象 ， 
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<WebView source={f{furi:'https://www.baidu.com'}} 

onError={ ()=>{ 

console.log ("error"); 

}} 

onLoad={ ()=>{ 
console.log("load"); 

EF 

onLoadEnd={ ()=>{ 
console.log("load end"); 

}} 

onLoadStart={f ()=>{ 
console.log("load start"); 

TF 

onNavigationStateChange={ (obj)=>{ 
console.log ("navigation",obj); 

二 

onShouldStartLoadWithRequest={ (request)=>{ 
console.1log("request", request.ur1l) 7 
return 七 rue7 

}} /> 

1 
} 


使 用 协议 解析 的 这 种 方式 进行 React Native 与 JavaScript 交互 ， 其 参数 通常 是 放 入 url 中 的 ， 这 种 
方式 只 能 完成 一 些 简单 的 交互 任务 ， 对 于 更 复杂 的 传 参 需求 ， 将 通过 下 一 小 节 的 方法 来 实现 。 


6.12.3 ”React Native 与 WebView 交互 


React Native 与 WebView 交互 还 可 以 通过 WebView 组 件 中 的 onMessage 属性 来 完成 。 这 个 属 
性 需要 设置 为 一 个 函数 对 象 ， 在 WebView 中 使 用 window.postMessage 方法 会 调用 此 属性 对 应 的 函 
数 ， 从 而 实现 React Native 与 JavaScript 的 数据 交互 。 网 页 端 在 调用 postMessage 方法 时 ， 只 能 传 入 
一 个 字符 串 类 型 的 参数 ， 示 例 代 码 如 下 : 


render (){ 





return( 
<WebView source={{uri:'https://www.baidu.com’'}} 
onMessage={ ({nativeEvent: {data}})=>{ 
console.log (data); 
}}/> 
) 7 
1 


需要 注意 ， 网 页 端 传 过 来 的 参数 会 封装 进 nativeEvent 属性 的 data 属性 中 ， 可 以 使 用 如 上 代码 
所 示 的 解构 赋值 方法 直接 抓 取 到 data 数据 。 要 测试 React Native 与 WebView 的 交互 我 们 需要 借助 
Safari 浏览 器 的 开发 者 工具 。 在 iOS 模拟 器 上 运行 工程 ， 在 Chrome 浏览 器 中 打开 React Native 的 
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调试 模式 ， 打 开 Safari 浏览 器 ， 选 择 菜单 栏 中 的 “开发 一 Simulator” 选 项 ， 可 以 看 到 在 模拟 器 上 运 
行 的 JavaScript 线程 ， 其 中 RCTJSContext 是 React Native 中 的 JavaScript 线程 ，www.baidu.com 为 
WebView 中 的 JavaScript 线程 ， 选 择 www.baidu.com， 如 图 6-26 所 示 。 


2 窗口 ”帮助 
打开 网 页 的 浏览 器 
用 户 代理 











上 


| 






Simulator 
Vip 的 MacBook Pro (2) 





VB YY 


RCTJSContext 
www.baidu.com 
V 自动 显示 JSContexts 的 Web 检查 器 
自动 暂停 连接 到 JSContexts i 





6-26 ”使 用 Safari 开发 者 工具 调试 WebView 
在 弹出 的 调试 台 界面 中 输入 如 下 代码 : 


window.postMessage ("Hello World") 


效果 如 图 6-27 所 示 。 
D Do 人 @ 2 
品 二 [5 Da Oums 1 ms ER 固 和 人 + 


ws ws es 自 








图 6-27 在 WebView 中 执行 JavaScript 脚本 
回 到 Chrome 浏览 器 中 React Native 应 用 调试 界面 ， 可 以 看 到 在 工作 台 输 出 了 WebView 传递 
进来 的 数据 Hello Wrold。 


6.13 ”View 视图 组 件 的 应 用 











通过 前 面 的 章节 , 你 学 习 到 了 许多 React Native 中 的 独立 视图 组 件 , 它们 中 很 多 都 是 基于 View 
组 件 扩展 而 来 的 。 本 节 将 向 你 介绍 React Native 中 视图 组 件 的 根基 : View 组 件 。 
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6.13.1 View 组 件 Style 属性 的 解析 


作为 界面 中 最 基础 的 组 件 ，View 的 Style 样式 支持 的 属性 非常 丰富 ， 大 致 可 以 分 为 4 类 : 布 
局 类 、 阴 影 类 、 几 何 变换 类 和 样式 类 。 

React Native 中 的 界面 布局 实际 上 采用 的 是 FlexBox 模型 ， 关 于 FlexBox 布局 后 面 会 有 专门 章 
节 进 行 讲解 ， 本 节 不 做 过 多 叙述 。 阴 影 类 相关 的 属性 在 Image 组 件 一 节 有 完整 的 介绍 ， 其 只 支持 
iOS 平台 。 几 何 变换 的 属性 在 Image 组 件 一 节 也 有 详细 的 介绍 ， 即 Transfrom 相关 属性 ， 用 来 对 视 
图 进行 平移 、 旋 转 、 缩 放 等 。 如 果 你 对 它们 的 用 法 有 些 模糊 ， 可 以 返回 相关 章节 进行 回顾 。 

在 HelloWorld 工程 的 Demo 文件 夹 下 新 建 一 个 命名 为 ViewDemo.js 的 文件 ， 在 其 中 编写 如 下 
代码 : 


import React, {Component} from 'react'; 











湿 


import {View} from 'react-native'; 
export default class ViewDemo extends Component{ 
render(){ 
return( 
<View style={baseStyle}> 
</View> 
ba 
} 
} 
let baseStyle = { 
// 布 局 属性 
width:200, 
height:200, 
// 样 式 属性 
backfaceVisibility:'hidden', 
backgroundColor: 'red', 
borderTopColor: 'green', 
borderRightColor:'blue', 
borderBottomColor: 'black', 
borderLeftColor:'yellow', 
borderTopWidth:10, 
borderBottomwidth:5， 
borderLeftwidth:20， 
borderRightWwidth:2, 
borderStyle:'solid', 
opacity:0.9, 
overflow: 'visible' 


} 
修改 index.iosjs 与 index.Androidjs 文件 后 ， 运 行 工程 ， 效 果 如 图 6-28 所 示 。 
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View 组 件 的 Style 风格 常用 








backfaceVisibility 


backgroundColor 





6-28 View 组 件 效果 
属性 如 表 6-23 所 示 。 
表 6-23 View 组 件 的 Style 风格 常用 属性 





设置 视图 的 背面 是 否 可 见 


设置 视图 背景 色 


通用 


值 类 型 或 可 选 值 
枚 举 字符 串 

。 visible: 可 见 
。 hidden: 不 可 见 
特定 的 颜色 字符 串 












borderColor 
borderTopColor 





设置 边框 颜色 





特定 的 颜色 字符 串 
特定 的 颜色 字符 串 













































borderRightColor 右边 框 颜色 通用 特定 的 颜色 字符 串 
borderBottomColor 特定 的 颜色 字符 串 
borderLeftColor 左边 框 颜色 通用 特定 的 颜色 字符 串 
borderRadius 设置 边框 圆 角 半径 通用 数值 
border TopLeftRadius 设置 边框 左上 角 圆 角 半径 通用 数值 
borderTopRightRadius 设置 边框 右上 角 圆 角 半径 通用 数值 
borderBottomLeftRadius 设置 边框 左下 角 圆 角 半径 通用 数值 
borderBottomRightRadius 设置 边框 右 下 角 圆 角 半径 通用 数值 
枚 举 字符 串 
barderstyle 设置 边框 风格 通用 
。 dashed: 虚线 
borderTopWidth 上 边框 宽度 通用 数值 








borderRightWidth 








右边 框 宽度 








数值 
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属性 名 
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( 续 表 ) 


值 类 型 或 可 选 值 






























borderBottomWidth 数值 

borderLeftWidth | 左边 框 宽度 通用 数值 

opacity | 设置 透明 度 数值 0~1 
枚 举 字符 串 

overflow 设置 溢出 是 否 隐藏 通用 。 visible: 可 见 











。 hidden: 隐藏 





View 组 件 的 风格 属性 在 iOS 平台 都 有 很 好 的 支持 ,在 Android 平台 可 能 会 有 些 差异 。 例 如 ， 
同时 设置 了 圆 角 和 边框 颜色 ， 边 框 颜色 的 属性 可 能 无 法 正 





6.13.2 ”View 组 件 基础 属性 的 解析 


View 组 件 中 提供 了 许多 基础 属性 ， 如 表 6-24 所 示 。 





表 6-24 View 组 件 基础 属性 

















属性 名 值 类 型 或 可 选 值 

accessibilityLabel iri 字符 串 

的 值 
accessible 设置 是 否 开启 读 屏 功能 布尔 值 

ee 函数 ， 传 入 参数 格式 如 下 : 
ee 当 组 件 挂 载 完成 或 者 布局 变化 i 

YY 时 调用 的 回调 {nativeEvent: { layout: {x, y, 
width, height}}} 

当 触 摸 点 在 组 件 上 移动 时 调用 

的 方法 , 这 个 方法 需要 返回 一 个 et a 
onMoveShouldSetResponder 布尔 值 决定 是 否 将 组 件 设置 为 函数 ， 需 要 返回 布尔 值 

事件 的 响应 者 

当 触 摸 点 在 组 件 上 移动 时 , 设置 
onMoveShouldSetResponderCapture | 组 件 是 否 拦截 此 事件 〈 若 拦截 ， 函数 ， 需 要 返回 布尔 值 

则 事件 不 会 传递 到 子 视图 ) 

当 组 件 成 功 成 为 事件 响应 者 时 
onResponderGrant 被 调用 函数 

当 作 为 事件 响应 者 接收 到 移动 
onResponderMove 事件 时 调用 函数 
onResponderReject tr 函数 
5 触摸 事件 处 理 完成 后 的 回调 , 注 函数 


销 响应 
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( 续 表 ) 
属性 名 解释 值 类 型 或 可 选 值 
这 个 属性 设置 的 函数 在 用 户 触 
onResponderTerminate 摸 交 互 被 打 断 时 调用 ， 例 如 来 函数 
电话 
Re 当 接 收 到 中 断 事件 请 求 时 被 函数 , 需要 返回 布尔 值 表示 是 
i 了 调用 否 接 受 此 中 断 
当 触 摸 事件 开始 的 时 候 回调 此 
onStartShouldSetResponder 函数 , 需要 返回 布尔 值 决定 是 否 函数 ， 需 要 返回 布尔 值 


成 为 响应 者 





onStartShouldSetResponderCapture 


当 触 摸 事件 开始 时 回调 的 函数 ， 
返回 布尔 值 确定 是 否 拦截 事件 


函数 ， 需 要 返回 布尔 值 





pointerEvents 


removeClippedSubviews 


设置 视图 是 否 可 以 作为 触摸 事 
件 的 目标 


对 于 滑动 组 件 , 其 子 视图 很 可 能 
会 超出 可 见 范围 ,这 个 属性 设置 
超出 可 见 范围 的 子 视图 是 否 被 
自动 移 除 








枚 举 字符 串 

。 auto: 可 以 作为 触摸 事件 
的 目标 

none: 不 能 作为 触摸 事件 
的 目标 

box-none: 视图 自身 不 能 
成 为 触摸 事件 的 目标 ,但 
是 子 视图 可 以 作为 触摸 事 
件 的 目标 

box-only: 视图 本 身 可 以 
作为 触摸 事件 的 目标 ， 但 
是 子 视图 不 能 成 为 触摸 事 
件 的 目标 


需要 注意 ， 上 面 提出 的 View 组 件 的 属性 虽然 很 多 与 用 户 触摸 事件 有 关 ， 但 一 般 情况 下 你 不 会 
直接 使 用 到 View 组 件 的 交互 功能 ， 如 果 需 要 自 定义 用 户 交 互 组 件 ， 可 以 使 用 Touchable 相关 组 件 


来 制作 。 


6.14 ”Touchable 相关 交互 组 件 的 应 用 


在 前 面 章节 中 , 你 学 习 到 了 使 用 Button 组 件 来 创建 按钮 , 然而 Button 组 件 的 定制 化 性 并 不 强 ， 
例如 想 要 创建 一 个 同时 由 图 标 和 文字 两 部 分 组 成 的 按钮 ， 使 用 Button 组 件 就 显得 有 些 棘手 。 本 节 
我 将 向 你 介绍 React Native 中 与 用 户 触摸 交互 功能 相关 的 组 件 ， 使 用 这 些 组 件 ， 你 可 以 轻松 地 创建 


出 自 定义 的 按钮 。 
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6.14.1 TouchableWithoutFeedback 


React Native 中 Touchable 相关 的 组 件 有 TouchableWithoutFeedback 组 件 、TouchableOpacity 组 
件 、TouchableNativeFeedback 组 件 和 TouchableHigglight 组 件 。 上 面 提 到 的 组 件 中 后 几 个 组 件 都 是 
基于 第 一 个 组 件 而 扩展 出 来 的 。 

TouchableWithoutFeedback 组 件 用 来 响应 用 户 的 触摸 操作 ， 需 要 注意 的 是 ， 这 个 组 件 中 只 能 包 
含 一 个 子 组 件 ， 如果 要 创建 复合 的 按钮 控件 , 需要 使 用 View 组 件 进行 包装 。 在 HelloWorld 工程 的 
Demo 文件 夹 下 新 建 一 个 命名 为 TouchableWithoutFeedbackDemojjs 的 文件 。 在 其 中 编写 如 下 代码 : 





import React, {Component} from 'react'; 
import {View,TouchableWithoutFeedback,Text,Image} from 'react-native'; 
export default class TouchableWithoutFeedbackDemo extends Component{ 
render (){ 
return( 
<View style={{top:100,1eft:100}}> 
<TouchableWithoutFeedback 
onLongPress={ ()=>{ 
console.log("long press"); 
}} 
onPress={ ()=>{ 
console.log("press"); 
}} 
onPressIn={ ()=>{ 
console.log("press in"); 
}} 
onPressOut={ ()=>{ 
console.1log("press out"); 
有 人 
<View> 
<Image source={require('./../source/image.png')} 
style={ {width:50,height:50}}/> 
<Text>Button</Text> 
</View> 
</TouchableWithoutFeedback> 
</View> 


' 

修改 index.iosjs 文件 与 index.Androidjjs 文件 后 运行 工程 ， 打 开 调 试 模式 ， 对 自 定义 的 交互 组 
件 进行 单 击 、 长 按 等 手势 可 以 看 到 调用 了 相应 的 触发 方法 。 

需要 注意 ，TouchableWithoutFeedback 组 件 是 无 UI 上 用 户 反馈 的 交互 组 件 ， 一 般 情 况 下 你 不 
会 真正 使 用 到 这 个 组 件 ， 在 做 移动 端 应 用 设计 时 ， 良 好 的 反馈 是 必要 的 。 
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TouchableWithoutFeedback 组 件 常用 属性 见 表 6-25。 
表 6-25 TouchableWithoutFeedback 组 件 常用 属性 
属性 名 解释 值 类 型 或 可 选 值 
数值 
人 设置 用 户 长 按 多 久 后 触发 长 按 回 调 
数值 
delayPressIn 按 下 触发 事件 设置 用 户 按 下 多 久 后 触发 按 下 回调 ， 即 
onPressIn 属性 的 回调 
数值 
delayPressOut 抬 起 触发 事件 设置 用 户 抬 起 手指 多 久 后 触发 抬 起 回调 ， 
即 onPressOut 属性 的 回调 
disabled 设置 是 否 禁 用 组 件 布尔 值 
如 下 格式 对 象 : 
hitslop 设置 交互 组 件 可 交互 的 范围 {top: number, left: number, bottom: number, 
right: number} 
这 个 属性 可 以 将 按钮 的 可 交互 范围 变 大 
， 会 参数 ; 
当 组 件 挂 载 完成 或 布局 改变 时 调 dnt to 
onLayout {nativeEvent: flayout {x, y, width, 
用 的 回调 
height}}} 
onLongPress 设置 长 按 触发 函数 函数 
函数 
onPress 设置 单 击 触发 函数 手指 按 下 并 抬 起 时 触发 
函数 
onPressIn 设置 按 下 触发 函数 FF 
‘onPressOut 设置 抬 起 触发 函数 Ea 手指 抬 起 时 触发 
这 个 属性 设置 当 手 指 按 下 不 抬 起 如 下 格式 对 象 : 
pressRetentionOffser | 并 在 屏幕 上 移动 时 ， 移 动 多 远 距 | 通用 {top: number left: number, bottom: number, 
离 后 组 件 将 不 再 激活 Tright: number} 


6.14.2 TouchableOpacity 


了 解 了 TouchableWithoutFeedback 组 件 后 ， 


学 习 其 他 Touchable 相关 组 件 将 容易 很 多 。 


TouchableOpacity 组 件 的 基本 用 法 和 TouchableWithoutFeedback 组 件 一 致 ， 也 就 是 说 ， 所 有 
TouchableWithoutFeedback 组 件 可 以 使 用 的 属性 在 TouchableOpacity 组 件 中 都 可 以 使 用 ， 
TouchableOpacity 组 件 在 进行 用 户 交互 的 时 候 会 产生 一 个 透明 度 变 化 的 反馈 。 在 HelloWorld 工程 的 
Demo 文件 夹 下 面 新 建 一 个 命名 为 TouchableOpacityDemojs 的 文件 ， 在 其 中 编写 如 下 代码 : 


import React, {Component} from 'react'; 


import {View,TouchableOpacity,Text,Image} from 'react-native'; 
export default class TouchableOpacityDemo extends Component{ 


render (){ 
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return( 
<View style={{top:100,1eft:100}}> 
<TouchableOpacity 
onLongPress={ ()=>{ 
console.log("long press"); 
jE 
onPress={ ()=>{ 
console.log("press"); 
WE 
onPressIn={ ()=>{ 
console.log("press in"); 
}} 
onPressOut={ ()=>{ 
console.log("press out"); 
}}> 
<View> 
<Image source={require('./../source/image.png')} 
style={ {width:50,height:50}}/> 
<Text>Button</Text> 
</View> 
</TouchableOpacity> 
</View> 


} 
修改 index.iosjs 与 index.Android.js 文件 后 ， 运 行 工 程 ， 单 击 自 定义 的 按钮 组 件 来 感受 一 下 交 
互 反馈 的 效果 。 
TouchableOpacity 组 件 除 了 支持 所 有 TouchableWithoutFeedback 组 件 中 的 属性 外 ， 还 支持 
表 6-26 中 的 属性 。 
表 6-26 TouchableOpacity 组 件 支 持 属 生 


情 |  。 解 和 | 平台。 | 。 什 类 或 可 直人 
activeOpacity 设置 反馈 的 透明 度 数值 (0~D 


6.14.3 TouchableNativeFeedback 





TouchableNativeFeedback 组 件 同 样 扩展 于 TouchableWithoutFeedback 组 件 , 其 会 带 给 用 户 一 个 
原生 体验 的 反馈 效果 。 需 要 注意 ，TouchableNativeFeedback 组 件 只 能 应 用 在 Android 平台 。 
HelloWorld 工程 的 Demo 文件 夹 下 新 建 一 个 命名 为 TouchableNativeFeedbackDemojjs 的 文件 ， 编 写 
如 下 代码 : 

import React, {Component} from 'react'; 

import {View,TouchableNativeFeedback,Text,Image} from 'react-native'; 
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export default class TouchableNativeFeedbackDemo extends Component{ 
render (){ 


return( 
<View style={{top:100,1eft:100}}> 

<TouchableNativeFeedback 

onLongPress={ ()=>{ 
console.log("long press"); 

}} 

onPress={ ()=>{ 
console.log("press"); 

}} 

onPressIn={ ()=>{ 


console.log("press in") 7 
}} 


onPressOut={ ()=>{ 


console.1log("press out"); 
» 
background={TouchableNativeFeedback.Ripple('red', false)}> 
<View> 
<Image source={require('./../source/image.png')} 
style={ {width:50,height:50}}/> 
<Text>Button</Text> 
</View> 


</TouchableNativeFeedback> 
</View> 
a 


} 


修改 index.Androidjs 文件 后 在 Android 模拟 器 上 运行 工程 ，TouchableNativeFeedback 组 件 提 
供 了 3 种 原生 体验 的 反馈 效果 ， 通 过 background 属性 〈 见 表 6-27) 来 进行 配置 。 


表 6-27 background 属性 


属性 名 解释 3 值 类 型 或 可 选 值 


有 如 下 3 种 : 


。 TouchableNativeFeedback.SelectableBackground0: 选中 效果 的 反馈 

。 TouchableNativeFeedback.SelectableBackgroundBorderless(): 波纹 效 
果 的 反馈 

。TouchableNativeFeedback.Ripple(color, borderless): 波纹 效果 的 反馈 ， 
开发 者 可 以 设置 波纹 颜色 与 是 否 扩展 到 组 件 边 界 之 外 ，color 参数 


设置 波纹 的 颜色 ，borderless 参数 为 布尔 值 ， 设 置 是 否 扩展 到 组 件 
边界 之 外 





background es Android 





绰 
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6.14.4 TouchableHighlight 








TouchableHighlight 组 件 当 用 户 进行 交互 的 时 候 会 产生 一 个 高 亮 的 效果 ， 其 实现 原理 是 降低 组 
件 的 透明 度 并 提供 一 个 背景 视图 。 在 HelloWorld 工程 的 Demo 文件 夹 下 新 建 一 个 命名 为 
TouchableHighlightDemo.js 的 文件 ， 编 写 如 下 代码 : 


import React, {Component} from "react'7 
import {View,TouchableHighlight,Text,Image} from 'react-native'; 
export default class TouchableHighlightDemo extends Component{ 
render (){ 
return( 
<View style={{top:100,1left:100}}> 
<TouchableHighlight 
onLongPress={ ()=>{ 
console.log("long press"); 
i 
onPress={ ()=>{ 
console.log("press"); 
}} 
onPressIn={ ()=>{ 
console.log("press in"); 
3 
onPressOut={ ()=>{ 
console.log("press out"); 
apd 
<View> 
<Image source={require('./../source/image.png')} 
style={ {width:50,height:50}}/> 
<Text>Button</Text> 
</View> 
</TouchableHighlight> 
</View> 
); 


} 











TouchableHighlight 组 件 的 高 亮 背 景 也 可 以 进行 自 定义 ， 属 性 如 表 6-28 所 示 。 
表 6-28 ”TouchableHighlight 组 件 背景 自 定义 属性 
属性 名 解释 平台 值 类 型 或 可 选 值 
activeOpacity 设置 组 件 激活 时 的 透明 度 通用 数值 (0 一 1) 
onHideUnderlay 当 背 景 视图 隐藏 时 调用 的 回调 通用 函数 
onShowUnderlay 当 背 景 视图 显示 时 调用 的 回调 通用 函数 
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( 续 表 ) 
属性 名 解释 值 类 型 或 可 选 值 
style 风格 属性 同 View 组 件 style 对 象 
underlayColor 设置 背景 视图 的 颜色 特定 格式 的 颜色 字符 串 





到 此 , 你 已 经 掌握 了 Touchable 相关 组 件 的 所 有 特性 , 可 以 开始 随心 所 欲 地 构建 自己 的 按钮 了 ， 
发 挥 想 象 ， 多 试 几 次 吧 ! 


6.15 ”ScrollView 滚动 视图 组 件 的 应 用 


在 移动 应 用 开发 中 ， 列 表 的 应 用 十 分 广泛 。 由 于 移动 设备 界面 尺寸 有 限 ， 因 此 在 设计 列表 时 ， 
我 们 会 将 大 部 分 列表 设计 为 可 以 垂直 滚动 或 者 水 平 滚动 的 视图 。 在 React Native 中 ScrollView 组 件 
是 所 有 列表 组 件 的 基础 ， 用 来 创建 一 个 可 以 滚动 的 视图 组 件 ， 支 持 垂直 或 者 水 平方 向 的 滚动 。 


6.15.1 ”ScrollView 的 基础 用 法 


ScrollView 组 件 的 设计 是 为 了 扩展 视图 的 显示 尺寸 ,因此 车 要 ScrollView 组 件 可 以 正确 计算 出 
可 以 深 动 的 范围 ， 必 须 为 其 指定 一 个 固定 的 宽 高 ， 或 者 其 父 视图 有 固定 的 尺寸 并 使 用 flex 来 指定 
ScrollView 的 布局 尺寸 。 在 HelloWorld 工程 的 Demo 文件 夹 下 新 建 一 个 命名 为 ScrollViewDemo.js 
的 文件 。 下 面 的 示例 代码 是 最 基础 的 ScrollView 的 用 法 : 


import React, {Component} from 'react'; 





import {ScrollView,Text} from 'react-native'; 
export default class ScrollViewDemo extends Component{ 
render (){ 
return( 
<ScrollView style={{flex:1}}> 
<Text style={textSstyle}> 
Hello world! 
</Text> 
<Text style={textSstyle}> 
Hello world! 
</Text> 
<Text style={textSstyle}> 
Hello world! 
</Text> 
<Text style={textSstyle}> 
Hello world! 
</Text> 
<Text style={textSstyle}> 
Hello world! 
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</Text> 
</ScrollView> 
) 7 
， 
let textStyle = { 
backgroundColor:'red', 
fontSize:40, 
textAlign:'center', 
marginTop:100 
} 


修改 index.iosjs 与 index.Androidjs 文件 后 运行 工程 ,效果 如 图 6-29 


所 示 。 上 下 拖 搜 屏幕 可 以 看 到 视图 的 滚动 效果 。 


ScrollView 组 件 默 认 支 持 的 是 屏幕 竖 直 方向 的 滚动 ， 其 中 子 视 图 的 
布局 是 竖 直 排列 的 ， 当 然 也 可 以 是 子 视图 水 平 排列 并 且 水 平 滚动 的 


ScrollView 组 件 。 


6.15.2 ”ScrollView 常用 属性 解析 


首先 所 有 View 组 件 可 用 的 属性 在 ScrollView 组 件 中 都 是 可 以 使 用 
的 , 包括 View 组 件 所 有 可 用 的 Style 风格 属性 , 本 节 就 不 再 一 一 列举 了 。 
ScrollView 不 仅 可 以 进行 视图 滚动 的 交互 ， 通 过 属性 的 设置 也 可 以 实现 


内 容 视图 缩放 的 交互 。ScrollView 组 件 常用 属性 如 表 6-29 所 示 。 


表 6-29 ScrollView 组 件 常用 属性 





图 6-29 ScrollView 组 件 








属性 名 解释 平台 值 类 型 或 可 选 值 
horizontal 设置 滚动 视图 是 否 水 平 滚动 模式 | 通用 | 布尔 什 
在 滚动 视图 中 ， 所 有 的 子 视图 都 
a 会 被 添加 到 一 个 内 容 视图 容器 | 通用 | 同 View 组 件 的 Style 属性 可 设 
人 里 ， 这 个 属性 设置 内 容 视图 容器 置 的 风格 对 象 
的 风格 
枚 举 字符 串 
。 none: 拖 搜 时 不 隐藏 键盘 
*» on-dray: 开始 拖 搜 时 隐藏 
keyboardDismissMode 设置 当 有 桂 盘 强 出 时 , 拖 棉 杭 轩 通用 键盘 


是 否 隐藏 键盘 











interactive: 向 下 拖 搜 隐藏 键 
盘 , 向 上 拖 搜 会 恢复 键盘 ( 仅 
iOS 平台 有 效 ) 
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( 续 表 ) 
属性 名 解释 平台 值 类 型 或 可 选 值 
枚 举 字符 串 
。 never: 单 击 TextInput 之 外 
si 的 组 件 会 收 起 键盘 
keyboardShouldPersistTaps tinted i 通用 | 。 always: 键盘 不 会 收 起 
”handled: 单 击 事件 被 子 组 件 
捕获 时 键盘 不 会 收 起 ， 单 击 
事件 没有 被 捕获 键盘 收 起 
AS 当 ScrollView 组 件 可 滚动 尺寸 发 通用 函数 ， 会 传 入 如 下 格式 的 参数 ; 
Pe 生变 化 时 调用 的 回调 (contentWidth, contentHeight) 
onScroll 组 件 滚动 时 调用 的 回调 通用 | 函数 
refreshControl 设置 下 拉 刷 新 组 件 通用 | 指定 的 RefreshControl 组 件 
removeClippedSubviews re 通用 | 布尔 值 
showsHorizontalScrollIndicator ”| 设置 是 否 显示 水 平方 向 的 滚动 条 | 通用 | 布尔 值 
showsVerticalScrollIndicator 设置 是 否 显示 紧 直 方向 的 滚动 条 | 通用 | 布尔 值 
pagingEnabled 是 否 开启 分 页 效果 通用 | 布尔 值 
scrollEnabled 设置 是 否 可 以 滚动 通用 | 布尔 值 
设置 水 平方 向 是 否 始终 显示 弹性 | . 
alwaysBounceHorizontal 回 拉 效 果 iOS “| 布尔 值 
设置 竖 直 方向 是 否 始终 显示 弹性 | . 
alwaysBounceVertical 回 拉 效 果 iOS “| 布尔 值 
设置 当 滚 动 视图 布局 在 导航 栏 后 | . i 
automaticallyAdjustContentInsets 面 时 是 否 自动 调整 布局 iOS “| 布尔 值 
bounces 是 否 有 弹性 回 拉 效果 iOS _| 布尔 值 
bouncesZoom 设置 是 否 有 缩放 回 弹 效果 iOS “| 布尔 值 
设置 当 子 控件 接收 事件 时 是 否 取 | . Pe 
canCancelContentTouches 消 滚动 事件 iOS 布尔 值 
centerContent 设置 内 容 视 图 是 否 居中 iOS “| 布尔 值 
如 下 格式 的 对 象 : 
contentInset 设置 内 容 视 图 的 边 距 iOS {top: number left: number, 
bottom: number, right: number} 
contentOffset 手动 设置 滚动 视图 的 显示 位 置 。 | is ee 
枚 举 字符 串 
decelerationRate 设置 滚动 视图 的 减速 速度 iOS 。 Normal: 正常 
。 Fast: 快速 
枚 举 字符 串 : 
indicatorStyle 设置 滚动 条 的 风格 iOS es pg 








。 white: 白色 
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( 续 表 ) 
属性 名 解释 平台 值 类 型 或 可 选 值 
maximumZoomScale 设置 缩放 的 最 大 比例 iOS | 数值 
minimumZoomScale 设置 缩放 的 最 小 比例 iOS | 数值 
onScrollAnimationEnd 滚动 动画 结束 之 后 调用 的 回调 iOS | 函数 
这 个 属性 设置 在 ScrollView 组 件 | . ype 用 
scrollEventThrottle 滚动 过 程 中 滚动 事件 的 调用 频率 iOS ”| 数值 ， 表 示 每 秒 调用 多 少 次 
如 下 格式 对 象 ; 
scrollIndicatorInsets 设置 滚动 条 距离 组 件 的 边 距 iOS | {top: number left: number, 
bottom: number, right: number} 
当 这 个 值 设置 为 tue 时 ， 单 击 状 
scrollsToTop 态 栏 会 直接 滚动 到 ScrollView 组 | iOS “| 布尔 值 
件 的 顶部 
这 个 属性 设置 后 ， 滚 动 视 图 会 停 
SnapToInterval 留 在 其 所 设置 的 数值 的 整数 倍 位 | iOS “| 数值 
置 上 
zoomScale 设置 滚动 视图 的 初始 缩放 比例 iOS “| 数值 ， 默 认为 1 
枚 举 字符 串 
当 使 用 SeroliView 的 方法 进行 滚 ee 
snapToAlignment 动 区 域 的 设置 时 ， 这 个 属性 设置 | iOS Ey 四 
停留 位 置 的 对 齐 模式 。 center， 停 留 中 间 
。 end: 停留 底部 











6.15.3 手动 设置 ScrollView 组 件 的 滚动 位 置 


ScrollView 中 提供 了 两 个 方法 供 开发 者 手动 对 ScrollView 组 件 滚动 位 置 进行 设置 ， 示 例 代 码 


如 下 : 


render (){ 
return( 

<ScrollView style={{flex:1}} 
contentContainerStyle={ {backgroundColor:"blue"}} 
pagingEnabled={true} 
stickyHeaderIndices={[0]} 
snapToAlignment={'center'} 
ref='scrollView'> 

<Text style={textStyle} 

onPress={ ()=>{ 

this.refs.scrollView.scrollTo({x:0,y:100,animated:true}); 
Ne 
Hello world! 
</Text> 
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<Text style={textStyle} 
onPress={ ()=>{ 
this.refs.scrollView.scrollToEnd ({animated: true}); 
}}> 
Hello world! 
</Text> 
<Text style={textStyle}> 
Hello world! 
</Text> 
<Text style={textStyle}> 
Hello world! 
</Text> 
<Text style={textStyle}> 
Hello world! 
</Text> 
</ScrollView> 
); 
scrollTo() 方 法 中 需要 传 入 要 滚动 到 的 位 置 坐标 ，animated 参数 为 布尔 值 ， 决 定 滚动 过 程 是 否 
带动 画 效果 。scrollToEnd() 方 法 用 来 直接 滚动 到 滚动 视图 的 末尾 ， 其 中 也 可 以 通过 设置 animated 参 
数 来 决定 是 否 带 动画 。 


6.16 ”ListView 列表 组 件 的 应 用 


通过 前 面 的 学 习 , 你 已 经 掌握 了 不 少 React Native 中 独立 组 件 的 应 用 , 本 节 将 要 介绍 的 ListView 
组 件 要 比 前 面 学 习 的 组 件 更 加 复杂 。 在 实际 开发 中 ，ListView 组 件 的 应 用 十 分 广泛 。 

ListView 组 件 是 一 个 垂直 的 滚动 列表 ， 你 可 以 自 定义 列表 中 每 一 行 数 据 载体 视图 的 具体 样式 。 
和 前 面 所 学 组 件 不 同 的 是 ，ListView 组 件 需 要 通过 DataSource 数据 源 来 进行 泻 染 。 


6.16.1 使 用 DataSource 泻 染 ListView 视图 


在 React Native 中 有 定义 ListViewDataSource 这 样 一 个 类 , 专门 用 来 创建 用 于 泻 染 ListView 的 
数据 源 。 首 先 在 HelloWorld 工程 的 Demo 文件 夹 下 新 建 一 个 命名 为 ListViewDemojjs 的 文件 , 在 其 
中 编写 如 下 代码 : 


import React, {Component} from "react'7 
import {ListView,Text} from 'react-native'; 
export default class ListViewDemo extends Component{ 
constructor (props){ 
super (props); 
this.dataSource = new ListView.DataSource({ 
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rowHasChanged: (rl,r2)=>r1!==r2, 
sectionHeaderHasChanged: (sl, s2)=>sl1!==s2, 
getRowData: (data, sID, rID)=>{ 
console.log (data, sID, rID); 
return data[sID] [rID]; 
Fr 
getSectionHeaderData: (data, sID)=>{ 
return "分 区 "+sID; 


]}) 7 

this.dataSource=this .dataSource.cloneWithRows ([ 
"数据 "， "数据 "， 
"数据 "， "数据 "， 
"数据 "， "数据 " 






]) 
render (){ 
return( 
<ListView dataSource={this.dataSource} 
renderRow={ (rowData) => { 
return(<Text style={{lineHeight:30,marginTop:30, 
backgroundColor: 'red',textAlign:'center'}}>{rowData}</Text>); 
}} 
renderSectionHeader={ (headerData, sID)=>1{ 
return(<Text style={{lineHeight:30,marginTop:30, 
backgroundColor: 'green',textAlign:'center'}} 
onPress={()=>{ 
let rows = this.dataSource.getRowCount (); 
let secs = this.dataSource.getRowAndSectionCount (); 
console.log (rows, secs); 
}}>{headerData}</Text>); 
Wh/> 
); 


} 

修改 index.iosjs 与 index.Android.js 文件 后 ， 运 行 工程 ， 效 果 如 图 6-30 所 示 。 

在 使 用 ListView 组 件 时 ， 有 两 个 属性 是 必须 提供 的 : dataSource 与 renderRow。dataSource 属 
性 是 列表 数据 的 提供 者 , renderRow 属性 用 来 设置 ListView 中 每 一 行 的 具体 视图 。 上 面 示 例 代码 中 
还 设置 了 renderSectionHeader 属性 ， 这 个 属性 用 来 设置 每 个 分 区 的 标题 视图 。 














ListView 可 以 进行 分 区 ， 简 单 理解 ， 分 区 就 是 将 数据 进行 分 组 ,每 个 分 组 都 可 以 添加 一 个 标 
题 视图 。 例如， 手机 上 的 联系 人 应 用 ， 通 常 联系 人 列表 会 以 姓名 首 字 母 进行 分 组 排序 。 
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属性 名 





图 6-30 ListView 组 件 效果 


要 彻底 掌握 ListView 组 件 的 应 用 ， 首 先 需要 深入 理解 DataSource 的 意义 与 用 法 。DataSource 
的 构造 函数 中 需要 传 入 一 个 对 象 参数 ， 此 对 象 可 以 进行 设置 的 属性 如 表 6-30 所 示 。 


表 6-30 DataSource 构造 函数 中 对 象 参数 的 属性 


备注 





getRowData 


getSectionHeaderData 


rowHasChanged 


设置 获取 行 数据 的 函数 


设置 获取 分 区 头 数据 的 
函数 


设置 判断 行 数据 改变 判 
定 的 函数 


此 函数 会 传 入 3 个 参数 ， 依 次 为 : 
， data: 原始 数据 

， sectionld: 分 区 ID 

*， rowld: 行 ID 
返回 数据 用 于 行 泻 染 

此 函数 会 传 入 两 个 参数 ， 依 次 为 : 
， data; 原始 数据 

。， sectionld: 分 区 ID 

返回 数据 用 于 分 区 标题 视图 泻 染 
此 函数 会 传 入 两 个 参数 ， 依 次 为 : 
。 rl: 数据 修改 前 的 行 数据 

。 D: 数据 修改 后 的 行 数据 
返回 布尔 值 表示 此 行 数据 是 否 改变 了 





sectionHeaderHasChanged 


需要 注意 ， 上面 列 出 的 4 个 





设置 分 区 头 数据 改变 判 
定 的 函数 











此 函数 会 传 入 两 个 参数 ， 依 次 为 : 
” sl: 数据 修改 前 的 分 区 头 数据 
，” s2: 数据 修改 后 的 分 区 头 数据 
返回 布尔 值 表示 此 分 区 头 数据 是 否 改变 了 


属性 都 是 可 选 的 ， 如果 开发 者 不 提供 获取 数据 的 方法 , 则 ListView 


会 按 默 认 的 规则 从 原始 数据 中 获取 用 于 泻 染 的 数据 , 这 种 情况 下 要 求 原始 数据 必须 严格 遵守 如 下 3 


种 格式 中 的 一 种 : 


® fsectionID1:{frowID1:rowDatalrowID2:rowData2. 
@ {sectionIDl:[rowDatal,rowData2,...],... 
® [[rowDatal,rowData?2],...] 
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DataSource 中 的 cloneWithRows 方法 用 来 指定 原始 数据 。 注 意 ， 这 个 方法 会 返回 一 个 新 的 
DataSource 对 象 ， 并 不 会 修改 原 DataSource 对 象 。cloneWithRows 方法 中 可 以 传 入 两 个 参数 ， 第 1 
个 参数 为 原始 数据 data， 第 2 个 参数 需要 是 一 个 数组 ， 数 组 中 对 应 每 一 行 的 rowId。cloneWithRows 
方法 在 只 有 一 个 分 区 时 使 用 ， 实 际 上 ， 在 React Native 内 部 的 实现 是 创建 了 一 个 sectionId 为 sl 的 
分 区 ， 使 用 这 个 方法 传 入 的 原始 数据 实际 上 会 被 转换 成 如 下 格式 : {sl1:data} 。 

与 cloneWithRows 方法 对 应 ，DataSource 中 还 有 一 个 cloneWithRowsAndSections 方法 。 这 个 
方法 在 ListView 多 分 区 时 用 来 设置 原始 数据 ， 其 中 可 以 传 入 3 个 参数 ， 依 次 为 原始 数据 data、 分 
区 sectionId 数组 和 每 个 分 区 的 rowId〈 二 维 数组 ) 。 

DataSource 中 其 他 常用 方法 如 表 6-31 所 示 。 


表 6-31 DataSource 的 其 他 方法 


画 娄 名 台数 
getRowCount 获取 总 行 数 通用 无 
getRowAndSectionCount 获取 分 区 数 加 上 总 行 数 | 通用 无 


sectionIndex: 分 区 下 标 ， 从 0 
rowShouldUpdate(sectionIndex, rowIndex) | 获取 某 行 是 否 需 要 刷新 | ii 开始 
rowIndex: 行 下 标 ， 从 0 开始 

















通过 给 定 索 引 值 获取 


getRowIDForFlatIndex(index) 通用 index: 索引 值 
rowld 


getSectionIDForFlatIndex(index) 通过 给 定 索 引 值 获取 通用 index: 索引 值 
sectionld 
后 ry 
SEE 获取 每 个 分 区 的 行 数 。 | 通用 | 返回 数组 ， 里 面 存放 每 个 分 区 
的 行 数 
通用 


sectionHeaderShouldUpdate(sectionIndex) oe 通 sectionIndex: 分 区 下 标 
上 面 ListView 的 示例 代码 只 是 最 简单 的 列表 创建 ， 通 常情 况 下 ， 分 区 可 能 有 多 个 ， 每 一 行 的 
数据 也 应 该 各 有 不 同 ， 将 代码 修改 如 下 : 
constructor (Props) { 


super (Props) 
this.dataSource = new ListView.DataSource ({ 














rowHasChanged: (rl1,r2)=>r1!==r2, 
sectionHeaderHasChanged: (sl, s2)=>sl1!==s2, 
getRowData: (data, sID, rID)=>{ 
console.log (data, sID, rrID); 
return "第 "+rID+" 行 "+data[sID] [rID]; 
}, 
getSectionHeaderData: (data, sID)=>{ 
return "分 区 "+sID; 
} 
A 
this.dataSource=this.dataSource.cloneWithRowsAndSections([[ 


第 6 章 React Native 独立 组 件 基础 篇 | 197 





"数据 "， "数据 "， 
"数据 "， "数据 "， 
"数据 "， "数据 " 
] 
"数据 "， "数据 "， 
"数据 "， "数据 "， 
J 
} 


运行 工程 ， 效 果 如 图 6-31 所 示 。 





6-31 多 分 区 的 ListView 


6.16.2 ”ListView 属性 方法 解析 


理解 了 DataSource 之 后 ， 学 习 ListView 将 如 鱼 得 水 。ListView 是 扩展 于 ScrollView 的 组 件 ， 


因此 所 有 ScrollView 可 用 的 属性 ，Li 


stView 组 件 都 可 以 使 用 。ListView 常用 属性 如 表 6-32 所 示 。 
表 6-32 ListView 常用 属性 














属性 名 解释 值 类 型 或 可 选 值 
dataSource 设置 数据 源 ListView.DataSource 实例 
设置 挂 载 完 成 时 加 载 的 行 数 , 这 个 
initialListSize 属性 设置 得 当 可 以 消除 下 载 | 通用 数值 
ListView 时 的 闪 屏 





onChangeVisibleRows 





当 可 见 行 发 生 改 变 时 调用 的 回调 | 通用 


函数 ， 会 传 入 如 下 格式 的 参数 
(visibleRows, changedRows) 

其 中 visibleRows 和 changedRows 
都 是 如 下 对 象 : 

{ sectionID: { rowID: truelfalse}} 
布尔 值 代表 此 行 是 否 可 见 
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( 续 表 ) 
属性 名 解释 值 类 型 或 可 选 值 
onEndReachedThreshold ee omendReached 加 | 油 的 内 数值 
当 所 有 的 数据 泻 染 过 并 且 列 表 距 
离 底 部 不 足 onEndReached- 
ER Threshold 设置 的 临界 值 时 调用 的 有 
回调 
pageSize 每 帧 泻 染 的 行 数 数值 
removeClippedSubviews 非 可 见 的 行 是 否 被 移 除 布尔 值 
renderFooter 设置 列表 的 尾 视 图 组 件 函数 ， 需 要 返回 组 件 实例 
renderHeader 设置 列表 的 头 视图 组 件 函数 ， 需 要 返回 组 件 实例 
函数 ， 传 参 格式 如 下 : 
renderRow 设置 每 行 视图 组 件 人 


renderScrollComponent 


设置 ScrollView 容器 


highlightRow) 

需要 返回 组 件 实例 

函数 , 需要 返回 ScrollView 组 件 作 
为 容器 ， 如 果 不 设置 这 个 属性 , 将 
默认 创建 一 个 ScrollView 作为 容器 
函数 ， 传 参 格式 如 下 : 









































renderSectionHeader 设置 每 个 分 区 的 标题 视图 (sectionData, sectionID) 

需要 返回 一 个 组 件 实例 

函数 ， 传 参 格式 如 下 : 

(sectionID, rowID, 
renderSeparator 设置 分 割 线 adjacentRowHighlighted) 


adjacentRowHighlighted 参数 表示 临 
近 行 是 否 高 亮 ， 需 要 返回 组 件 实例 





scrollRenderAheadDistance 


ScrollView 组 件 中 所 有 可 用 的 方法 在 ListView 中 也 是 同样 适 


动 到 末尾 等 。 





设置 当 某 一 行距 离 屏幕 多 少 距 离 
时 就 开始 提前 演 染 











数值 


忆 的 ， 例 如 滚动 到 某 一 位 置 ， 滚 


ListView 虽然 十 分 强大 , 但 在 数据 量 很 大 、 列表 行 数 很 多 的 情况 下 仍 不 能 保证 良好 的 内 存 回 


收 ， 这 往往 会 造成 不 可 控 的 内 存 问 题 。 后 面 我 们 会 学 习 FlatView 组 件 ， 它 和 ListView 的 最 
大 区 别 就 在 于 内 存 的 管理 优化 。 
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6.17 ”高 性 能 列表 组 件 FlatList 


FlatList 组 件 是 在 React Native 0.43 版 本 之 后 引入 的 新 列表 组 件 ， 优 化 了 ListView 的 加 载 性 能 
并 且 将 列表 的 泻 染 简洁 化 ， 去 掉 了 通过 数据 源 DataSource 的 演 染 方式 ， 直 接 使 用 简单 数组 来 进行 
数据 的 获取 。 对 于 功能 上 来 说 ，FlatList 和 ListView 基本 相似 ，FlatList 组 件 不 能 进行 分 区 但 是 可 以 
进行 多 列 布局 ，ListView 不 能 进行 多 列 布 局 但 是 可 以 分 区 。 


6.17.1 创建 一 个 简单 的 FlatList 列表 视图 


在 HelloWorld 工程 的 Demo 文件 夹 下 新 建 一 个 命名 为 FlatListDemo.js 的 文件 ， 在 其 中 编写 如 
下 代码 : 


import React, {Component} from 'react'; 
import {FlatList,Text,View} from 'react-native'; 
export default class FlatListDemo extends Component{ 

constructor (props){ 

super (props); 

this.dataSource = [ 

{ 

key:1, 
value: "数据 " 
}, 


key:2, 
value: "数据 " 


key:3, 
value: "数据 " 


key:4, 
value: "数据 " 


key:5, 
value: "数据 " 
} 





1 
render (){ 
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return( 
<FlatList data={this.dataSource} 


renderItem={ (item)=>{ 
return(<Text style={{marginLeft:20,backgroundColor:'red', 


marginTop:10,textAlign:'center',lineHeight:30, fontSize:22}}>item</Text>); 

| 

ItemSeparatorComponent={ ()=>{ 
return( 
<View style={{height:2,backgroundColor:'black'}}></View> 
i 

2 

ListFooterComponent={ ()=>{ 


return( 
<Text style={{backgroundColor: 'blue',textAlign:'center', 
lineHeight:20,fontSize:18}}>FOOTER</Text> 
); 
1 
ListHeaderComponent={ ()=>{ 


return( 
<Text style={{backgroundColor:'blue',textAlign:'center', 


lineHeight:20,fontSize:18}}>HEADER</Text> 
人 


}} 
columnWrapperStyle={ {backgroundColor: 'green'}} 


numColumns={3} 
getIitemLayout={ (dataArray, index)=>{ 
return {length:50,offset:52*index,index:index}; 


站， 
/> 


上 面 代码 创建 了 3 列 的 表格 视图 ， 修 改 index.iosjs 与 index.Androidjs 文件 后 运行 工程 ， 效 果 
如 图 6-32 所 示 。 








6-32 FlatList 组 件 效果 
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FlatList 组 件 常用 属性 列表 如 表 6-33 所 示 。 


表 6-33 FlatList 组 件 常用 属性 



































属性 名 解释 值 类 型 或 可 选 值 
ItemSeparatorComponent | 设置 行 间 分 割 线 函数 ， 需 要 返回 一 个 组 件 
ListFooterComponent 设置 列表 的 尾 视图 函数 ， 需 要 返回 一 个 组 件 
ListHeaderComponent 设置 列表 的 头 视图 函数 ， 需 要 返回 一 个 组 件 

设置 行 容 器 样式 ， 当 布局 模式 为 多 
columnWrapperStyle 列 时 可 用 style 对 象 
设置 数据 源 ， 需 要 为 数组 对 象 ， 数 
data 组 存放 的 对 象 必须 包含 一 个 名 为 数组 对 象 
key 的 属性 
函数 ， 会 传 入 如 下 参数 : 
(data, index) 
其 中 data 为 数据 源 数 组 ，index 为 
区 。 元 素 下 标 
手动 设置 每 一 个 元 素 的 布局 ， 这 样 i 
getltemLayout 做 可 以 优化 性 能 ， 减 少 自 适 应 布局 OO TM ey 
造成 的 计算 成 本 ee 四 
index: number} 
其 中 length 表示 元 素 的 高 ，offset 
表示 元 素 的 位 置 ,index 表示 元 素 的 
下 标 
i a 布尔 值 ， 需 要 注意 ， 如 果 设 置 为 
horizontal 设置 布局 模式 是 否 为 水 平 布局 true， 则 不 能 支持 多 列 模式 
全 参数 ， 
这 个 属性 设置 的 函数 需要 返回 一 个 a ed 
keyExtractor 叭 的 字符 申 作 为 元 素 的 key 什 ， item 为 此 元 素 对 应 的 数据 ，index 


如 果 不 实现 这 个 函数 ， 则 在 数据 源 


为 元 素 下 标 ， 需 要 返回 字符 串 作为 























中 每 个 数据 必须 提供 key 属性 此 元 素 的 key 
ee ne 是 否 以 ListView 的 实现 方式 来 泻 染 布尔 值 
列表 ， 即 不 进行 性 能 优化 
numColumns 设置 列 数 数值 
i 函数 ， 参 数 格式 如 下 : 
onEndReached 当 列表 湾 动 到 距离 底部 “ 定 下 离 时 (info: {distanceFromEnd: number}) 
调用 的 函数 distanceFromEd 为 距 底部 的 距离 
onEndReachedThreshold 入 本 必 轴 车 生 区 全 用 后生 数值 
onEndReached 
设置 刷新 时 回调 的 方法 ， 当 这 个 属 
onRefresh 性 设置 后 ，FlatList 会 自动 创建 一 个 函数 





刷新 组 件 
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( 续 表 ) 
属性 名 解释 F 值 类 型 或 可 选 值 
布尔 值 
refreshing 设置 刷新 状态 true: 开始 刷新 
false; 结束 刷新 
函数 ， 传 参 格式 如 下 : 
a re ({viewableltems, changed}) 
onViewableltemsChanged Bi viewableltem 为 所 有 可 见 的 元 素 信 
息 数 组 ,changed 为 所 有 可 见 状态 改 
变 的 元 素 信息 数组 


6.17.2 ”FlatList 中 常用 方法 解析 


FlatList 组 件 中 也 定义 了 几 个 常用 的 实例 方法 〈 见 表 6-34) ， 直 接 使 用 FlatList 对 象 来 调用 即 
可 。 
表 6-34 FlatList 组 件 常用 的 实例 方法 





方法 名 解释 参数 解析 
a , 可 以 传 入 如 下 格式 的 对 象 ; 
scrollToEnd 滚动 到 列表 底部 {animated:tme} 表示 是 否 有 动画 效果 
可 以 传 入 如 下 格式 的 对 象 : 


{animated: true, index: 1, viewPosition: 0} 

其 中 ，animated 表示 是 否 有 动画 效果 ，index 为 元 素 索引 ， 
viewPosition 为 以 元 素 的 哪个 位 置 为 参照 点 ， 取 值 在 0 一 ! 
之 间 ， 如 果 设 置 为 0.5 就 表示 滚动 到 指定 元 素 的 中 间 
{animated: true, offset 100} 


scrollToIndex ”| 滚动 到 某 个 元 素 索 引 





scrollToOffset | 滚动 到 指定 位 置 
scrollToItem 滚动 到 指定 的 元 素 





{animated: true, item: object, viewPosition: 1} 
其 中 item 为 元 素 对 象 











6.18 ”分 区 列表 组 件 SectionList 的 应 用 


SectionList 组 件 与 FlatList 组 件 用 法 基本 一 致 ，SectionList 组 件 不 支持 多 列 布局 但 是 支持 对 数 
据 进 行 分 区 。 和 FlatList 一 样 ，SectionList 和 ListView 相 比 性 能 更 加 优化 ， 需 要 注意 ，SectionList 
组 件 必须 在 React Native 0.43 版 本 之 后 使 用 。 

在 HelloWorld 工程 的 Demo 文件 夹 下 新 建 一 个 命名 为 SectionListDemo.js 的 文件 , 在 其 中 编写 
如 下 代码 : 

import React, {Component} from "Feact "7 

import {SectionList,Text,View} from "react-native'7 

export default class SectionDemo extends Component{ 
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constructor (props){ 
super (props); 
this.sectionSource = [ 


{ 





render () { 


return( 


data:[ 
{ 
title:" 分 区 1 数据 1"， 
key 1 
}, 
{ 
title:" 分 区 1 数据 2"， 
key:"r2" 
} 
], 
key:"sl" 
}, 
{ 
data:[ 
{ 
title:" 分 区 2 数据 1"， 
Key: "ra3n 
}, 
{ 
title:" 分 区 2 数据 2"， 
key:"r4" 
} 
]， 
key:"s2" 
} 
<SectionList 


renderItem={ (data)=>{ 

return(<Text style={itemStyle}>{data.item.title}</Text>); 
}} 
sections={this.sectionSource} 
ItemSeparatorComponent={ ()=>{ 

return(<View style={separatorStyle}></View>); 
}} 
ListFooterComponent={ ()=>{ 

return(<Text style={footOrHeadStyle}>FOOTER</Text>); 
i 
ListHeaderComponent={ ()=>{ 
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return (<Text style={footOrHeadStyle}>HEADER</Text>); 
}} 
SectionSeparatorComponent={ ()=>{ 
return (<View style={{height:3, backgroundColor: 
'green'}}></View>); 
于 
renderSectionHeader={ (data)=>{ 
return(<Text style={itemStyle}>{data.section.key}</Text>); 
}} 


/> 
); 
} 
} 
let itemStyle = { 
lineHeight:30, 


backgroundColor:'red', 
textAlign:'center', 
fontSize:22 


let separatorStyle = { 
left:30, 
backgroundColor: 'gray', 
height:1 


let footOrHeadStyle = { 
lineHeight:50, 
backgroundColor: 'blue', 
textAlign:'center', 
fontSize:24 


SectionList 采用 的 数据 源 也 是 数组 对 象 ， 其 中 第 一 层 为 分 区 数 
据 对 象 ， 每 个 分 区 对 象 中 必须 包含 一 个 data 属性 作为 分 区 中 的 行 数 
据 ，key 属性 作为 分 区 的 唯一 标识 。 行 数据 对 象 中 也 必须 包含 一 个 
key 属性 作为 行 唯一 标识 。 运 行 工 程 ， 效 果 如 图 6-33 所 示 。 
SectionList 中 的 常用 属性 如 表 6-35 所 示 。 











图 6-33 SectionList 组 件 效果 
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表 6-35 ”SectionList 中 的 常用 属性 
属性 名 解释 平台 值 类 型 或 可 选 值 
设置 行 间 分 割 线 ， 每 个 分 区 首 行 | 、 i 
ItemSeparatorComponent 前 和 未 行 后 不 会 添加 通用 | 函数 ， 需 要 返回 组 件 对 象 
ListFooterComponent 设置 列表 的 尾 视图 通用 | 函数 ， 需 要 返回 组 件 对 象 
ListHeaderComponent 设置 列表 的 头 视图 通用 | 函数 ， 需 要 返回 组 件 对 象 
SectionSeparatorComponent | 设置 分 区 间 的 分 割 线 通用 | 函数 ， 需 要 返回 组 件 对 象 
， 会 参数 : 
Wii 党 必要 加 一，| Gem jn aoe men 
eyExtractor Pe ke ; 4 
个 唯一 的 字符 串 作为 行 的 key 值 需要 返回 字符 中 作为 键 什 
onRefresh 设置 刷新 调用 的 回调 通用 | 函数 
refreshing 是 否 开启 刷新 通用 | 布尔 值 
函数 , 会 将 行 数据 以 如 下 格式 传 入 ; 
renderItem 泻 染 每 行 数据 通用 | fitem: Item, index: number} 
需要 返回 组 件 对 象 
会 将 分 区 数据 以 如 下 格式 传 入 : 
renderSectionHeader 泻 染 每 个 分 区 头 视图 通用 | {section: SectionT} 
需要 返回 组 件 对 象 
sections 设置 数据 源 数组 通用 | 数组 ， 格 式 如 前 面 的 示例 代码 所 示 











至 此 ,你 已 经 将 React Native 中 所 有 可 能 使 用 到 的 列表 组 件 学 习 了 一 遍 ， 列 表 组 件 是 开发 中 





非常 常用 的 一 种 组 件 ， 后 面 的 实战 过 程 中 ， 你 也 会 体会 到 列表 组 件 的 精 代 所 在 。 


6.19 ”RefreshControl 刷新 组 件 的 应 用 


FlatList 组 件 与 SectionList 组 件 是 React Native 0.43 版 本 中 引入 的 新 组 件 ， 内 置 下 拉 刷 新 组 件 。 
对 于 ScrollView 与 ListView， 你 可 以 通过 手动 设置 下 拉 组 件 来 使 其 支持 下 拉 刷 新 功能 。 
打开 HelloWorld 工程 中 的 ScrollViewDemo.js 文件 ， 修 改 如 下 : 


import React, {Component} from 'react'; 


import {ScrollView,Text,RefreshControl} from 'react-native'; 


export default class ScrollViewDemo extends Component{ 


constructor (props){ 
super (props); 
this.state = { 

refresh:false 


} 


} 
render (){ 
return( 
<ScrollView style={{flex:1}} 
contentContainerStyle={ {backgroundColor:"blue"}} 
pagingEnabled={false} 
stickyHeaderIndices={ [0]} 
snapToAlignment={"'center'} 
ref='scrollView' 
refreshControl={this.getRefreshControl () }> 
<Text style={textStyle} 
onPress={ ()=>{ 
this.refs.scrollView.scrollTo({x:0,y:100, 
animated:true}); 
}}> 
Hello world! 
</Text> 
<Text style={textStyle} 
onPress={ ()=>{ 
this.refs.scrollView.scrollToEnd({animated: true}); 
}}> 
Hello world! 
</Text> 
<Text style={textStyle} 
onPress={ ()=>{ 
this.setState({ 
refresh:false 
1); 
}}> 
Hello world! 
</Text> 
<Text style={textStyle}> 
Hello world! 
</Text> 
<Text style={textStyle}> 
Hello world! 
</Text> 
</ScrollView> 


1 
getRefreshControl (){ 
return( 
<RefreshControl onRefresh={ ()=>{ 
this.setState({ 
refresh:true 
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Ha 

console.1og ("开始 刷新 ") ; 
}} 
refreshing={this.state.refresh} 


colors={['red', 'green']} 
enabled={true} 
progressBackgroundColor="blue" 
size={RefreshControl .SIZE.LARGE} 
progressViewOffset={100} 
tintColor='red' 
title="refreshing"/> 


} 
} 


let textStyle = 


{ 


backgroundColor:'red', 


fontSize:40, 


textAlign:'center', 


marginTop:100, 


} 


运行 工程 ， 在 Android 与 iOS 模拟 器 上 运行 工程 ， 通 过 下 拉 可 以 看 到 下 拉 刷 新 组 件 的 效果 。 
RefreshControl 中 很 多 属性 都 是 分 平台 的 ， 常 用 属性 如 表 6-36 所 示 。 


表 6-36 RefreshControl 常用 属性 




















属性 名 解释 值 类 型 或 可 选 值 
onRefresh 刷新 组 件 激活 时 的 回调 函数 函数 
refreshing 设置 是 否 开启 刷新 状态 布尔 值 
colors 设置 绘制 刷新 组 件 的 颜色 数组 数组 
enabled 设置 刷新 组 件 是 否 启 用 布尔 值 
progressBackgroundColor | 设置 刷新 组 件 的 背景 颜色 特定 的 颜色 字符 串 
在 如 下 变量 中 选择 : 
» RefreshControl.SIZE.DEFAULT: 
size 设置 刷新 组 件 的 尺寸 默认 大 小 
*» RefreshControl.SIZE.LARGE: 
大 尺寸 
progressViewOffset 设置 刷新 组 件 竖 直 方向 上 的 位 置 数值 
tintColor 设置 刷新 组 件 颜色 特定 的 颜色 字符 串 
title 设置 刷新 组 件 显示 的 文字 字符 串 











ListView 组 件 是 扩展 于 ScrollView 组 件 的 ， 因 此 在 ListView 中 ，RefreshControl 组 件 的 用 法 和 
在 ScrollView 中 的 用 法 一 致 -你 可 以 尝试 修改 一 下 ListViewDemo.js 文件 ,使 我 们 自 定义 的 ListView 


视图 支持 下 拉 刷 新 。 
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通过 第 6 章 的 学 习 ， 你 已 经 掌握 了 许多 React Native 中 跨 平 台 的 独立 组 件 。 然 而 iOS 平台 与 
Android 平台 毕竟 差异 很 大 ， 在 React Native 中 还 定义 了 许多 专用 于 某 种 平台 的 组 件 。 本 章 我 们 将 
主要 介绍 这 类 组 件 的 应 用 。 

- 款 完整 的 应 用 程序 几乎 不 可 能 只 有 一 个 界面 , 本 章 你 还 将 学 习 如 何在 React Native 中 管理 界 
实现 界面 的 跳 转 切换 。 通 过 本 章 的 学 习 , 相信 你 的 React Native 开发 能 力 会 再 上 一 个 台阶 。 








7.1 时 间 选 择 器 DatePickerlOS 组 件 的 应 用 


在 前 面 章节 中 ， 已 经 学 习 了 选择 器 Picker 组 件 。 其 实在 iOS 平台 上 ，React Native 还 提供 了 一 
个 专门 用 来 选择 日 期 时 间 的 组 件 DatePickerIOS。 在 HelloWorld 工程 的 Demo 文件 夹 下 新 建 一 个 命 
名 为 DatePickerIOSDemojjs 的 文件 ， 在 其 中 编写 如 下 代码 : 


import React, {Component} from 'react'; 
import {DatePickerIOS} from 'react-native'; 
export default class DatePickerIOSDemo extends Component{ 
constructor (props){ 
super (props); 
this.state = { 
date:new Date() 


} 

} 

render (){ 
return( 


<DatePickerIOS style={{width:300,height:200,1left:10,top:30}} 
date={this.state.date} 
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有 


DatePickerIOS 组 件 有 3 种 模式 ,分 别 为 date、time 和 datetime。 | 
修改 index.iosjs 文件 后 运行 工程 ， 效 果 如 图 7-1 所 示 。 
，DatePickerIOS 组 件 是 一 个 受 控 组 件 ， 用 户 的 操作 
无 法 改变 DatePickerIOS 组 件 的 选择 值 ， 开 发 者 在 接收 到 用 户 选择 
回调 后 ， 需 要 手动 修改 DatePickerIOS 组 件 的 date 属性 。 
DatePickerIOS 组 件 扩展 于 View 组 件 ， 因 此 View 组 件 的 所 有 属性 








mode={'time'} 


onDateChange={ (newDate)=>{ 


this.setState({ 
date:newDate 
}) 7 
}}/> 


都 支持 ， 其 他 常用 属性 如 表 7-1 所 示 。 








图 7-1 DatePickerIOS 组 件 样式 


表 7-1 DatePickerlOS 组 件 的 其 他 常用 属性 

















属性 名 解释 平台 值 类 型 或 可 选 值 
date 当前 选中 的 日 期 iOS | Date 对 象 
maximumDate 可 选 的 最 大 日 期 iOS Date 对 象 
minimumDate 可 选 的 最 小 日 期 iOS Date 对 象 
et 可 选 的 时 间 分 钟 间隔 人 可 选 数值 为 1、2、3、4、5、6、10、12、 
15、20、30 
枚 举 字符 串 
、 . 。 date: 日 期 模式 
mode 选择 器 组 件 模式 iOS 。 time; 时 间 模 式 
，_datetime: 日 期 时 间 模 式 
onDateChange 当 用 户 修改 日 期 时 回调 的 函数 | i0S 函数 , 会 传 入 用 户 选 择 的 Date 日 期 对 象 
和 . 数值 ， 用 来 指定 时 区 的 分 钟 差 ， 例 如 东 
timeZoneOffsetInMinutes | 设置 时 区 差 ， 单 位 是 分 钟 iOS 八 区 可 以 设置 8+60 








7.2 ”DrawerLayoutAndroid 抽 层 组 件 的 应 用 


在 安 卓 设 备 上 ， 很 容易 见 到 各 式 各 样 的 抽 层 视图 。 抽 层 视 图 常常 可 以 通过 在 设备 屏幕 边缘 滑 
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动手 势 来 打开 ， 在 React Native 中 ， 提 供 了 DrawerLayoutAndroid 组 件 来 创建 抽 居 视图。 

在 HelloWorld 工程 的 Demo 文件 夹 下 新 建 一 个 命名 为 DrawerLayoutAndroidDemo.jjs 的 文件 ， 
在 其 中 编写 如 下 代码 : 

import React, {Component} from "react'7 


import {DrawerLayoutAndroid,View,Text} from 'react-native'; 
export default class DrawerLayoutAndroidDemo extends Component{ 





render (){ 
return( 
<DrawerLayoutAndroid 
drawerWidth={150} 
drawerPosition={DrawerLayoutAndroid.positions.Left} 


renderNavigationView={ ()=>{ 


return( 
<View style={{flex: 1, backgroundColor: ‘'#fff'}}> 


<Text style={{margin: 10, fontSize: 15, textAlign: 
"left'}}> 抽 慑 视图 </Text> 
</View> 
yn 


bt 
<View style={{flex: 1, alignItems: 'center'}}> 


<Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}> 


Hello</Text> 
<Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}> 


World!</Text> 
</View> 
</DrawerLayoutAndroid> 
); 


} 

DrawerLayoutAndroid 组 件 是 一 个 容器 组 件 ， 其 中 的 子 组 
件 会 演 染 在 显示 内 容 中 ，renderNavigationView 属性 用 来 设置 
抽 民 视图， 修改 index.android.js 文件 后 ， 运 行 工程 ， 效 果 如 
图 7-2 所 示 。 

通过 在 屏幕 上 使 用 左 划 和 右 划 手势 ， 可 以 对 抽 层 进行 打开 
与 收 起 操作 。DrawerLayoutAndroid 组 件 扩展 于 View 组 件 ， 因 
此 可 以 使 用 所 有 View 组 件 可 用 的 属性 。DrawerLayoutAndroid 
组 件 中 的 常用 属性 如 表 7-2 所 示 。 








7-2 ”DrawerLayoutAndroid 组 件 效果 
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表 7-2 DrawerLayoutAndroid 组 件 常用 属性 


























属性 名 解释 值 类 型 或 可 选 值 
枚 举 字符 串 
keyboardDismissMode Oo 程 中 是 none: 不 隐藏 键盘 
on-drag: 拖 搜 时 隐藏 
有 如 下 两 种 可 选 值 : 
。 DrawerConsts.DrawerPosition.Left: 从 左 
drawerPosition 设置 抽 屠 的 弹出 方向 侧 滑 出 
。 DrawerConsts.DrawerPosition.Right; 从 右 
侧 滑 出 
drawerWidth 设置 抽 层 宽度 数值 
设置 抽 导 锁定 状态 ， 设 枚 举 字符 串 : 
ee 置 后 ， 只 能 够 通过 函数 *。 unlocked: 不 锁定 
方法 来 开关 ， 不 能 通过 ， locked-closed: 关闭 
手势 开关 。 locked-open: 开启 
于 5 
onDrawerSlide 人 函数 
函数 ， 会 传 入 如 下 3 种 状态 之 一 : 
当 抽 层 状 态 发 生 改变 ， idle: 空闲 状态 ， 无 任何 交互 
onDrawerStateChanged 时 调用 的 回调 Android 。 dmagging: 拖 搜 中 
。 settling: 停靠 中 
onDrawerClose 二 的 函数 
回调 
renderNavigationView 用 来 浑 染 抽 导 视图 函数 ， 需 要 返回 组 件 
statusBarBackgroundColor | 设置 状态 栏 背景 色 特定 颜色 字符 串 


可 以 使 用 如 表 7-3 所 示 的 方法 通过 代码 来 实现 抽 导 的 开关 。 


方法 名 


openDrawer 


表 7-3 ”实现 抽 居 开关 的 方法 
参数 





closeDrawer 





Android 


7.3 进度 条 组 件 的 应 用 


无 论 在 iOS 平台 还 是 Android 平台 都 有 进度 条 这 一 原生 控件 ,在 进行 数据 加 载 、 网 络 请 求 、 音 
视频 播放 等 任务 时 ， 进 度 条 都 起 到 了 不 可 或 缺 的 提示 作用 。 然 而 在 React Native 中 ， 进 度 条 组 件 却 
不 是 跨 平台 的 ， 针 对 iOS 与 Android 平台 ，React Native 分 别提 供 了 用 于 创建 进度 条 的 组 件 。 我 们 
可 以 通过 一 些 兼 容 平台 技巧 来 同时 在 双 平 台 上 进行 进度 条 组 件 的 应 用 。 
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7.3.1 通过 文件 名 分 平台 加 载 组 件 


React Native 支持 通过 规范 的 命名 文件 来 使 其 自 适 应 平台 加 载 代 码 。 前 面 我 们 编写 的 文件 都 是 
通用 格式 的 文件 , 如果 需要 只 在 iOS 平 台 加 载 ,需要 添加 .ios 作为 后 级 名 ,同样 如 果 需 要 只 在 Android 
平台 加 载 ， 则 需要 添加 .android 作为 后 缀 名 。 在 React Native 中 ，iOS 平台 的 进度 条 组 件 定义 为 
ProgressViewIOS，Android 平台 定义 的 进度 条 组 件 为 ProgressBarAndroid 。 

在 HelloWorld 工程 的 Demo 文件 夹 下 面 新 建 两 个 文件 ， 分 别 命名 为 ProgressBar.iosjs 与 
ProgressBar.android.js。 当 你 在 其 他 文件 中 引用 ProgressBar 文件 时 ， 系 统 会 自动 判断 平台 取 合适 的 
JavaScript 文件 。 将 ProgressBar.ios.js 文件 实现 如 下 : 


import React, {Component} from 'react'; 
import {ProgressViewIOS} from '‘'react-native'; 
export default class ProgressBar extends Component{ 
render (){ 
return( 
<ProgressViewIOS style={{top:100}} 
ProgressTintColor='red' 
PprogressViewStyle={'default'} 
progress={0.5} 
J 
bh 


将 ProgressBar.androidjs 文件 实现 如 下 : 


import React, {Component} from 'react'; 
import {ProgressBarAndroid,View} from 'react-native'; 
export default class ProgressBar extends Component{ 
render (){ 
return( 

<ProgressBarAndroid style={{top:100}} 

color='red' 

styleAttr={"Horizontal"} 

progress={0.5} 

indeterminate={false}/> 


} 
将 index.iosjs 与 index.android.js 文件 修改 如 下 : 


import React, { Component } from 'react'; 
import { 

AppRegistry 
} from 'react-native'; 
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import ProgressBar from './Demo/ProgressBar'; 


export default class HelloWorld extends Component { 
render() { 


return (<ProgressBar />); 


} 
} 


AppRegistry.registerComponent ('HelloWorld', () => HelloWorld) 


在 两 个 平台 上 运行 工程 ， 效 果 分 别 如 图 7-3 与 图 7-4 所 示 。 





图 7-3 


7.3.2 ”ProgressBarAndroid 组 件 常用 属性 


TO-54 AM mw 








iOS 平台 下 的 进度 条 组 件 





图 7-4 Android 平台 下 的 进度 条 组 件 


ProgressBarAndroid 组 件 是 Android 平台 上 的 进度 条 组 件 ， 扩 展 于 View 组 件 并 且 支 持 多 种 风 
格 样式 ， 除 了 可 以 使 用 所 有 View 组 件 可 用 的 属性 外 ， 其 他 常用 属性 如 表 7-4 所 示 。 


表 7-4 ”ProgressBarAndroid 组 件 其 他 常用 属性 





























属性 名 解释 本 向 值 类 型 或 可 选 值 
color 进度 条 颜色 Android _| 特定 的 颜色 字符 串 
当前 进度 , 需要 当 indeterminate 设置 为 false . 
ET 并 且 styleAttr 为 Horizontal 风格 时 使 放 Et 
indeterminate ”| 是 否 显示 不 确定 的 进度 Android _| 布尔 值 
枚 举 字符 串 
。 Horizontal: 水 平 
styleAttr 设置 进度 条 风格 Android 
。 Inverse: 逆序 圆圈 
。 SmallInverse: 小 逆序 
。 LargeInverse: 大 逆 
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7.3.3 ”ProgressViewlOS 组 件 常用 属性 


ProgressViewIOS 


以 使 用 所 有 View 组 件 的 





属性 名 
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表 7-5 ProgressViewlOS 组 件 常用 属性 


解释 





日 件 用 于 在 iOS 平台 上 创建 进度 条 ， 其 同样 也 是 扩展 于 View 组 件 ， 因 此 可 
属性 ， 除 此 之 外 ， 常 用 属性 如 表 7-5 所 示 。 





值 类 型 或 可 选 值 

















progress 当前 进度 值 iOS 数值 (0 一 1) 
progressImage 设置 进度 条 图 片 iOS 图 片 素材 
progressTintColor 设置 进度 条 颜色 iOS 特定 的 颜色 字符 串 
枚 举 字符 串 : 
progressViewStyle 设置 进度 条 风格 iOS » default 
» bar 








trackImage 


trackTintColor 














设置 进度 条 未 走 过 进 度 的 图 片 
设置 进度 条 未 走 过 进 度 的 颜色 









特定 的 颜色 字符 串 





7.4 SegmentedControllOS 组 件 的 应 用 


SegmentedControl 是 iOS 平台 上 的 一 个 原生 控件 ， 又 称 为 分 段 控制 器 。SegmentedControlIOS 
组 件 是 React Native 对 iOS 平台 中 分 段 控制 器 的 包装 。 它 常用 在 进行 模块 选择 的 功能 中 。 
在 HelloWorld 工程 的 Demo 文件 夹 下 新 建 一 个 命名 为 SegmentedControllOSDemojjs 的 文件 ， 


在 其 中 编写 如 下 代码 : 


import React, {Component} from 'react'; 


import {SegmentedControlIOS} from 'react-native'; 


export default class SegmentedControlIOSDemo extends Component{ 


render (){ 
return( 


<SegmentedControlIOS 
style={ {top:100}} 
onChange={ ()=>{ 


PY 


console.log("onChange"); 


onValueChange={ (value)=>{ 


}} 


console.log (value); 


selectedIindex={0} 
tintColor='red' 
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} 


values={['one', 'two', 'three']}/> 


修改 index.iosjs 文件 后 ， 运 行 工 程 ， 效 果 如 图 7-5 所 示 。 





7-5 ”SegmentedControlIOS 组 件 效果 


当 用 户 单 击 分 段 控制 器 中 的 某 一 段 时 可 以 实现 选中 切换 。SegmentedControllOS 组 件 扩 展 于 
View 组 件 ， 因 此 可 以 使 用 所 有 View 组 件 可 用 的 属性 ， 除 此 之 外 的 常用 属性 如 表 7-6 所 示 。 


表 7-6 _ SegmentedControllOS 组 件 常用 属性 




















属性 名 解释 值 类 型 或 可 选 值 
enabled 设置 组 件 是 否 可 以 交互 布尔 值 
设置 是 否 不 保持 选中 状态 ， 如 果 设 
momentary 置 为 true, 则 分 段 控制 器 不 会 保持 选 布尔 值 
中 状态 ， 但 相应 回调 依然 会 调用 
onChange 当 用 户 单 击 了 某 段 会 调用 的 回调 函数 
当 用 户 单 击 某 段 时 调用 ， 会 将 选中 
onValueChange 的 值 作为 参数 传 入 函数 
selectedIndex 设置 初始 选中 的 段 下 标 数值 
tintColor 设置 分 段 控制 器 颜色 特定 的 颜色 字符 串 





values 





设置 每 段 的 值 ， 会 显示 为 标题 数组 ， 其 中 的 元 素 需要 为 字符 串 类 型 





7.5 ”Android 平台 上 的 工具 条 组 件 


React Native 中 提供 了 ToolbarAndroid 组 件 ,用 来 在 Android 平 台 上 创建 工具 条 。ToolbarAndroid 
组 件 十 分 灵活 ， 不 仅 提供 了 丰富 的 属性 供 我 们 对 工具 条 进行 定制 ， 还 可 以 完全 定义 自己 的 工具 条 组 件 。 
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在 HelloWorld 工程 的 Demo 文件 夹 下 面 新 建 一 个 命名 为 ToolbarAndroidDemojjs 的 文件 , 在 其 
中 编写 如 下 代码 : 


import React, {Component} from 'react'; 
import {ToolbarAndroid,View} from 'react-native'; 
export default class ToolbarAndroidDemo extends Component{ 
render (){ 
return( 
<ToolbarAndroid 
style={ {height:56,backgroundColor: 'green'}} 
logo={require('./../source/logo.png')} 
navIcon={require('./../source/setting.png')} 
overflowIcon={require('./../source/setting.png')} 
subtitle='React Native' 
subtitleColor='blue' 
title='ToolbarAndroid' 
titleColor='red' 
actions={[ 
title:'settingl', 
icon:require('./../source/timg.jpeg'), 
show: 'always', 
showWithText:true 


title:'setting2', 
icon:require('./../source/timg.jpeg'), 
show: 'ifRoom', 

showWithText:true 


title:'setting3', 
icon:require('./../source/timg.jpeg'), 
show: 'never', 
showWithText:true 
}, 
Ih; 
onActionSelected={ (position)=>{ 
console.log (position); 
}} 
onIconClicked={ ()=>{ 
console.log('icon'); 
Et 
-> 
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ToolbarAndroid 组 件 大 致 分 为 3 个 部 分 : 导航 图 标 部 分 ， 标 题 部 分 和 功能 列表 部 分 。 其 中 ， 导 
航 图 标 部 分 在 左 ， 标 题 部 分 在 中 间 ， 功 能 列表 部 分 在 右 侧 。 功 能 列表 也 支持 进行 折 登 显示 。 修 改 
index.android.js 文件 后 ， 运 行 工程 ， 效 果 如 图 7-6 所 示 。 
上 面 的 示例 代码 使 用 的 是 默认 的 工具 条 样式 ， 是 使 用 单 标签 创建 的 。 同 样 ， 也 可 以 使 用 双 标 
签 来 创建 完全 自 定 的 工具 条 ， 示 例如 下 : 
<ToolbarAndroid style={{backgroundColor:'red',height:50, 


marginTop:50}} 
logo={require('./../source/logo.png')}> 
<Switch /> 
<Text>Switch</Text> 
</ToolbarAndroid> 


运行 工程 效果 如 图 7-7 所 示 。 


“#0 1043 


回回 转 





图 7-6 ToolbarAndroid 组 件 效 果 图 7-7 定制 ToolbarAndroid 组 件 





ToolbarAndroid 组 件 扩展 于 View 组 件 ， 默 认 所 有 View 组 件 的 属性 ToolbarAndroid 组 件 都 可 
以 使 用 。ToolbarAndroid 组 件 常用 属性 如 表 7-7 所 示 。 
表 7-7 ToolbarAndroid 组 件 常用 属性 
解释 






值 类 型 或 可 选 值 
本 地 图 片 素材 
本 地 图 片 素材 
函数 








属性 名 
navIcon | 设置 导航 图 标 
| 设置 工具 条 图 标 
当 单 击 导航 图 片 时 调用 的 回调 














logo 




















onlconClicked 
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( 续 表 ) 
属性 名 解释 值 类 型 或 可 选 值 
数组 ， 其 中 为 如 下 格式 的 对 象 : 
{ 
title: 功能 按钮 标题 
icon: 功能 按钮 图 标 
show: 是 否 隐藏 
actions 设置 功能 按钮 数组 sowWithText: 是 否 显示 文案 


onActionSelected | 设置 单 击 功 能 按钮 后 的 回调 函数 


} 

其 中 show 属性 可 选 值 如 下 : 

。 always: 总 是 显示 

， ifRoom: 能 放下 就 显示 

。 never: 不 显示 

函数 ， 会 将 选中 的 功能 按钮 在 数组 中 的 下 
标 传 入 

设置 溢出 的 功能 按钮 被 集成 到 列 























overflowIcon 表 中 的 入 口 图 标 本 地 图 片 素材 

subtitle 设置 工具 条 副标题 字符 串 

subtitleColor 设置 工具 条 副标题 颜色 特定 格式 的 颜色 字符 串 
title 设置 工具 条 标题 字符 串 

titleColor 设置 工具 条 标题 颜色 特定 格式 的 颜色 字符 串 


需要 注意 ， 所 有 ToolbarAndroid 组 件 中 使 用 到 的 图 片 素材 必须 为 本 地 素材 ， 不 可 以 使 用 远程 
图 像 (虽然 在 开发 环境 可 能 可 以 使 用 ， 但 正式 打包 时 依然 会 有 问题 〉。 


7.6 Navigator 导航 控制 器 


Navigatior 组 件 是 React Native 中 最 为 重要 的 几 个 组 件 之 一 。 有 了 Navigatior 组 件 ， 你 可 以 轻 
松 地 实现 界面 间 的 切换 跳 转 。Navigator 组 件 并 非 为 一 个 独立 的 视图 ， 其 实质 是 一 种 界面 管理 器 ， 
其 管理 着 一 组 视图 的 切换 。 在 学 习 Navigator 组 件 之 前 ， 先 回忆 一 下 栈 这 种 数据 结构 。 

栈 是 编程 中 一 种 重要 的 数据 结构 ， 与 其 对 应 的 还 有 队列 这 种 数据 结构 。 你 可 以 将 栈 理解 为 只 


有 一 面 开 











的 容器 ， 数 据 的 进出 遵守 “后 进 先 出 ， 先 进 后 出 ”这 种 原则 。 队 列 则 是 一 种 双 面 开口 的 





容器 ， 数 据 的 进出 遵守 “先进 先 出 ， 后 进 后 出 ”原则 。 栈 和 队列 数据 存储 的 示例 图 如 图 7-8 所 示 。 


通常 


， 数 据 的 入 栈 操作 也 叫 push， 数 据 的 出 栈 操作 也 叫 pop。 在 Navigatior 组 件 中 ， 栈 存储 的 


其 实 就 是 每 个 界面 。 
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栈 存 储 结构 示意 图 队列 存储 结构 示意 图 
图 7-8 ” 栈 与 队列 存储 示意 图 


7.6.1 Navigatior 牛刀 小 试 


在 HelloWorld 工程 的 Demo 文件 夹 下 新 建 一 个 命名 为 NavigatiorDemojjs 的 文件 ， 在 其 中 编写 
如 下 代码 : 


import React, {Component} from 'react'; 
import {Navigator,View,Text,Button} from 'react-native'; 
export default class NavigatorDemo extends Component{ 
render (){ 
return( 
<Navigator initialRoute={{name:'first',index:0}} 
renderScene={ (route,navigatior)=>{ 
return this.renderScene (route,navigatior); 


} } /> 


} 
renderScene (route,navigatior){ 
return( 
<View style={{flex:1,backgroundColor: 'red'}}> 
<Text style={ {marginTop:30,fontSize:20,textAlign:'center'}} 
>{route.name}</Text> 
<Button title="push" onPress={()=>{ 
navigatior.push({name:'Scene'+(route.index+1), 
index:route.index+1}); 
}} /> 
<Button title="pop" onPress={ ()=>{ 
if (route.index>0) { 
navigatior.pop(); 
} 
}} /> 
</View> 
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上 面 的 示例 代码 中 只 使 用 到 了 Navigator 组 件 的 两 个 属性 一 一 initialRoute 属性 和 renderScene 
属性 ，initialRoute 属性 设置 导航 组 件 的 初始 路 由 ，renderScene 属性 用 来 提供 要 泻 染 的 界面 。 运 行 
工程 ， 单 击 push 和 pop 按钮 ， 可 以 观察 到 界面 的 切换 效果 。 

路 由 在 Navigator 组 件 中 是 十 分 重要 的 ， 你 需要 通过 路 由 来 切换 对 应 的 界面 。 试 想 一 下 ， 打 开 
浏览 器 ， 想 要 浏览 一 个 网 页 时 需要 输入 此 网 页 的 地 址 ， 一 个 地 址 对 应 一 个 网 页 。Navigator 组 件 界 
面 的 切换 也 是 采用 这 样 的 设计 思路 ， 你 可 以 为 每 个 路 由 设置 名 称 与 下 标 。renderScene 方法 中 会 传 
入 路 由 信息 ， 其 需要 根据 路 由 信息 来 泻 染指 定 的 界面 。Navigator 实例 的 push 与 pop 方法 分 别 用 来 
界面 的 入 栈 与 出 栈 操 作 ， 你 也 可 以 简单 理解 ，push 方法 将 弹出 一 个 新 的 界面 覆盖 在 原 界 面 上 ， 而 
pop 操作 则 是 将 当前 的 界面 移 除 ， 将 其 下 面 的 界面 显示 出 来 。 


抽 丝 剥 草 
需要 注意 ， 如 果 React Native 版 本 大 于 0.44， 那 么 上 面 的 代码 可 能 会 无 法 运行 ， 原因 在 于 
React Native 0.44 版 本 后 将 Navigator 组 件 移动 到 了 一 个 单独 的 库 中 ,你 需要 在 根 目 录 中 使 用 
如 下 命令 进行 安装 : 


yarn add react-native-deprecated-custom-components 
并 且 使 用 如 下 方式 进行 导入 : 


import { Navigator } from 'react-native-deprecated-custom-components' 





7.6.2 ”Navigator 属性 配置 
Navigator 组 件 中 提供 了 丰富 的 配置 属性 ， 如 表 7-8 所 示 。 


表 7-8 Navigator 组 件 的 配置 属性 


属性 名 解释 1 值 类 型 或 可 选 值 


函数 ， 会 传 入 如 下 格式 参数 
(route, routeStack) 
其 中 route 为 当前 跳 转 的 路 由 , routeStack 为 路 由 栈 
数组 。 需 要 返回 如 下 指定 值 《 所 有 值 都 需要 加 
Navigator SceneConfigs 前 级 ): 

。 PushFromRight: 从 右 侧 压 入 

。 FloatFromRight: 右 侧 浮 入 

， FloatFromLeft， 左 侧 浮 入 

。 FloatFromBottom: 下 侧 浮 入 

。 FloatFromBottomAndroid: 下 侧 闪 入 

。 FadeAndroid: 闪烁 进入 

。 HorizontalSwipeJump: 水 平滑 入 
HorizontalSwipeJumpFromRight: 右 侧 水 平滑 入 
VerticalUpSwipeJump: 竖 直 滑 入 

。 VerticalDownSwipeJump: 竖 直 滑 入 








configureScene ”| 配置 界面 弹出 的 效果 通用 
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( 续 有 ) 
属性 名 解释 平台 值 类 型 或 可 选 值 
函数 ， 会 传 入 如 下 参数 : 
(route, navigator) 
renderSeene | 用 来 演 染 指定 路 由 场景 。 | 通用 | is 为 当前 时 转 的 路 由 ，navigator 为 导航 组 件 实 
例 ， 需 要 返回 组 件 对 象 
initialRoute 定义 启动 时 加 载 的 路 由 通用 | 自 定义 路 由 对 象 
initialRouteStack | 提供 一 个 初始 化 的 路 由 数组 “| 通用 “| 数组 ， 其 中 为 自 定义 的 路 由 对 象 
界面 切换 前 会 被 调用 的 回调 ， 
onWillFocus 会 将 新 界面 的 路 由 作为 参数 | 通用 “| 函数 ， 会 将 切换 界面 的 路 由 作为 参数 传递 
传 入 
onDidFocus 界面 切换 完成 后 回调 的 函数 “| 通用 ”| 函数 ， 会 将 当前 界面 的 路 由 传 入 
ne 设置 在 界面 切换 过 程 中 使 用 | 、 Ep 
navigationBar 保持 的 导航 栏 通用 ”| 需要 返回 组 件 对 象 
navigator 设置 父 导航 控件 通用 需要 返回 Navigator 对 象 
同 ,这 个 属性 站 
oo 设置 每 个 界面 容器 的 风格 通用 同 View 组 件 的 style 属性 , 这 个 属性 设置 后 会 作用 


7.6.3 ”Navigator 实例 方法 解析 


Navigator 组 件 中 提供 了 大 量 的 用 来 转换 界面 的 方法 ， 如 表 7-9 所 示 。 
表 7-9 Navigator 组 件 的 方法 


方法 名 


getCurretRoutes 








在 所 有 路 由 界面 中 


| 多 律 | | 参数 


获取 当前 路 由 栈 数组 





jumpBack 





跳 回 上 一 个 路 由 ， 但 是 依然 保存 当前 









































路 由 
与 jumpBack 对 应 , 如 果 通 过 jumpBack 
jumpForward 跳 回 上 一 个 路 由 , 路 由 会 被 保存 , 使 用 无 
这 个 方法 可 以 再 跳 回 下 一 个 路 由 
jumpTo 跳 转 到 指定 路 由 ， 不 销毁 当前 的 路 由 路 由 对 象 
push 跳 转 到 新 的 界面 路 由 对 象 
跳 转 回 上 一 个 界面 , 并且 将 当前 界面 和 无 
路 由 销毁 
replace 用 一 个 新 的 路 由 替换 当前 的 界面 路 由 对 象 
需要 两 个 参数 , 第 一 个 为 路 由 
A di 普 换 挤 路 由 机 数 组 中 指定 对 象 ,第 一 个 为 要 替换 的 路 由 
在 栈 数组 中 的 下 标 
TeplacePrevious 替换 掉 之 前 的 路 由 界面 路 由 对 象 
resetTo 跳 转 到 新 的 场景 ， 并 且 重 置 路 由 栈 路 由 对 象 
immediatelyResetRouteStack | 用 新 的 路 由 栈 来 重 置 Navigator 路 由 对 象 数组 
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( 续 表 ) 
方法 名 解释 
跳 转 回 之 前 的 某 个 路 由 位 置 ,这 个 位 置 
人 之 后 的 所 有 路 由 界面 都 会 销毁 
本 跳 转 回 导 航 的 第 一 个 界面 ,之 后 所 有 的 


路 由 界面 都 会 被 销毁 


7.7 iOS 平台 的 导航 控制 如 NavigatorlOS 组 件 





如 果 你 熟悉 iOS 原生 开发 ， 那 么 你 一 定 知道 UINavigationController 这 个 类 ， 在 iOS 原生 开发 
中 会 时 常 使 用 到 UINavagationController 来 组 织 导航 栈 结构 的 界面 切换 。React Native 中 提供 了 与 其 
对 应 的 NavigatorIOS 组 件 。 


7.7.1 使 用 NavigatorlOS 组 件 





在 HelloWorld 工程 的 Demo 文件 夹 下 面 新 建 一 个 命名 为 NavigatorIOSDemojjs 的 文件 , 在 其 中 
编写 如 下 代码 : 


import React, { 
Component 
} from "react'; 
import { 
NavigatorIOS， 
View, 
Text, 
Button 
} from 'react-native'; 
export default class NavigatorIOSDemo extends Component { 
render() { 
return ( 
<NavigatorIOS initialRoute = { 
{ 
component: MyScene, 
te iret 
PassProps:{ 
Param:"Secen"， 
index:0 
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MyScene extends Component { 


render() { 


} 
class 

1 
} 


return ( 
<View> 


<Text style={ {marginTop:70,textAlign:'center',fontSize:22}}> 
{this.props.paramt+this.props.index} 


</Text> 
<Button title = "push" 
OnPress = { 
由 


this.props.navigator.push({ 


title: "Other", 
component :MyScene, 


PassProps: 
Param:"Secen"， 


index:this.props.index+1 


.> 
</View> ) 


修改 index.iosjs 文件 后 在 iOS 平台 运行 工程 ,效果 如 图 7-9 所 示 。 
NavigatorIOS 组 件 自 带 一 个 顶部 的 导航 栏 ， 导 航 栏 中 间 会 显示 


标题 ， 如 果 
显示 一 个 返 
以 实现 界面 

关于 上 
组 件 不 同 的 





当前 界面 不 是 导航 器 的 根 界面 ， 那 么 导航 栏 上 还 会 默认 
回 按钮 ， 当 用 户 单 击 返 回 按钮 或 者 使 用 右 滑 手 势 时 ， 可 





的 返回 操作 可 以 单 击 push 进行 试验 ) 。 
面 的 示例 代码 ,我 们 还 需要 深入 地 解释 一 下 , 和 Navigator 
是 ，NavigatorIOS 组 件 的 路 由 配置 有 着 严格 的 要 求 ， 同 


时 功能 也 更 加 强大 。 首 先 NavigatorIOS 组 件 的 initialRoute 属性 用 来 


设置 导航 器 


的 初始 路 由 ， 即 导航 器 加 载 出 来 时 默认 显示 的 界面 。 在 


NavigatorIOS 组 件 中 ， 路 由 对 象 是 被 严格 定义 的 ， 其 中 可 以 添加 的 
属性 和 意义 如 表 7-10 所 示 。 





7-9 NavigatorIOS 组 件 效果 
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表 7-10 在 NavigatorlOS 组 件 路 由 对 象 属性 























属性 名 解释 值 类 型 或 可 选 值 
component 必 选 属性 ， 设 置 演 染 界面 的 组 件 类 类 函数 对 象 
设置 界面 标题 ， 这 个 标题 会 被 泻 染 
title 在 导航 栏 中 间 字符 串 
设置 标题 图 标 ， 如 果 设 置 了 这 个 属 
titleImage 性 ， 会 在 导航 栏 中 间 显 示 所 设置 的 本 地 图 片 素材 
图 标 
passProps 用 来 传递 参数 自 定义 对 象 
backButtonIcon 设置 返回 按钮 图 标 本 地 图 片 素材 
backButtonTitle 设置 返回 按钮 标题 字符 串 
Ey Y 
leftButtonTitle jas 了 全 相生 的 全 字符 串 
一 不， 
leftButtonIcon ee 大仙 功能 入 贫 。 补 寺 术 纪 本 地 图 片 素材 
枚 举 字符 串 : 
。 done: 完成 按钮 
。 cancel: 取消 按钮 
。 edit: 编辑 按钮 
， save: 存储 按钮 


leftButtonSystemIcon 


提供 一 个 系统 风格 的 左 侧 功能 按钮 


， add: 添加 按钮 

。 compose: 整理 按钮 
。 reply: 重复 按钮 
action: 活动 按钮 

。 organize: 组 织 按钮 
。 bookmarks: 书库 按钮 


























。 search: 搜索 按钮 
， refresh: 刷新 按钮 
。 stop: 停止 按钮 
。 camera: 相机 按钮 
， trash: 删除 按钮 
。 play: 播放 按钮 
。 paush: 暂停 按钮 
。 rewind: 回 退 按钮 
， undo: 撤销 按钮 
。 redo: 重 做 按钮 
onLeftButtonPress 左 侧 功 能 按钮 被 单 击 时 的 回调 函数 函数 
rightButtonIcon 设置 右 侧 功 能 按钮 图 标 本 地 图 片 素材 
rightButtonTitle 设置 右 侧 功能 按钮 标题 字符 串 
TightButtonSystemIcon | 提供 一 个 系统 风格 的 右 侧 功能 按钮 枚 举 字符 串 ， 同 reftButtonSystemIcon 
onRightButtonPress 右 侧 功能 按钮 被 单 击 时 回调 的 函数 函数 
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( 续 表 ) 
属性 名 解释 值 类 型 或 可 选 值 

让 en style 对 银 

navigationBarHidden ”| 设置 是 否 隐藏 导航 栏 布尔 值 

shadowHidden 设置 是 否 隐藏 导航 栏 下 边线 布尔 值 

tintColor 设置 导航 栏 按钮 颜色 颜色 字符 串 

barTintColor 设置 导航 栏 背景 颜色 颜色 字符 串 

titleTextColor 设置 导航 栏 标题 颜色 颜色 字符 串 

translucent 设置 导航 栏 是 否 半 透 明 布尔 值 





正如 表 7-10 所 示 ，NavigatorIOS 组 件 的 路 由 对 象 提 供 


泻 染 时 , component 属性 注册 的 组 件 类 会 被 自动 进行 实例 化 ， 


route、navigator 以 及 passProps 所 提供 的 自 定义 对 象 中 的 





了 极为 丰富 的 可 配置 属性 ， 当 进行 界面 
并 且 会 对 界面 组 件 实例 添加 一 些 属性 : 
属性 。 在 MyScene 类 中 ， 你 可 以 使 用 





this.props.navigator 来 获取 导航 实例 ， 也 可 以 使 用 this.props.route 获取 当前 路 由 对 象 ， 还 可 以 使 用 


this.props.index 直接 获取 passProps 传递 的 属性 。 
7.7.2 ”NavigatorlOS 属性 与 方法 解析 


NavigatorIOS 组 件 中 常用 属性 如 表 7-11 所 示 。 


表 7-11 NavigatorlOS 组 件 常用 属性 
































属性 名 解释 平台 值 类 型 或 可 选 值 
navigationBarHidden 设置 导航 栏 是 否 隐藏 iOS 布尔 值 
shadowHidden 设置 是 否 显示 导航 栏 下 边线 iOS 布尔 值 
itemWrapperStyle 设置 导航 中 界面 组 件 的 容器 视图 风格 iOS style 对 象 
tintColor 设置 导航 按钮 颜色 iOS 颜色 字符 串 
barTintColor 设置 导航 栏 背 景色 iOS 颜色 字符 串 
titleTextColor 设置 导航 标题 颜色 iOS 颜色 字符 串 
translucent 设置 导航 栏 是 否 半 透 明 iOS 布尔 值 
interactivePopGestureEnabled 设置 是 否 开 启 右 滑 自动 返回 上 一 界面 手势 ”| iOS 布尔 值 
initialRoute 初始 路 由 iOS 路 由 对 象 

NavigatorIOS 组 件 提供 的 界面 切换 方法 与 Navigator 组 件 基 本 一 致 ， 只 是 传 入 的 路 由 参数 必须 


是 严格 的 NavigatorIOS 路 由 对 象 ， 方 法 如 表 7-12 所 示 。 


表 7-12 ”NavigatorlOS 路 由 对 象 方法 






解释 









push | 切换 到 一 个 新 的 界面 


iOS 


路 由 对 象 








| 返回 上 一 个 界面 








iOS 


无 











到 前 N 个 界面 








数值 ， 当 传 入 1 时 效果 和 pop 一 致 
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( 续 表 ) 
方法 名 解释 参数 
传 参 格式 如 下 : 
a (route,index) 

replaceAtIndex 替换 导航 栈 中 某 个 路 由 。 route， 路 由 对 象 

， index: 替换 导航 栈 中 的 路 由 下 标 
replace 替换 当前 界面 的 路 由 路 由 对 象 
replacePrevious 替换 上 一 个 界面 的 路 由 路 由 对 象 
popToTop 返回 到 导航 栈 根 路 由 界面 无 
popToRoute 返回 到 导航 栈 中 的 指定 路 由 路 由 对 象 

本 本 日 执 行 

replacePreviousAndPop 个 界面 的 路 由 并 且 执行 pop 路 由 对 象 
resetTo 重 置 导航 栈 路 由 对 象 


抽 丝 剥 草 





NavigatorIOS 组 件 中 最 重要 的 概念 便 是 路 由 , 路 由 配置 负责 对 界面 泻 染 、 设置 导航 栏 样式 以 
及 为 数据 传递 提供 支持 。 





本 节 将 介绍 React Native 中 最 后 


组 件 只 能 应 用 于 iOS 3 


标签 栏 管理 的 界面 是 关 


7.8 


标签 栏 TabBarlOS 组 件 


-个 常用 的 视图 管理 组 件 TabBarIOS。 正 如 其 名 ，TabBarIOS 


FE 台 ， 其 是 对 iOS 原生 控件 UITabBarBarController 的 React Native 版 实现 。 所 
谓 标 签 栏 其 实际 也 是 用 于 界面 的 切换 ， 与 Navigator 不 同 的 是 导航 管理 的 界面 是 有 层次 结构 的 ， 而 


F 列 结构 ， 其 界面 的 切换 并 没有 父子 关系 。 





在 HelloWorld 工程 的 Demo 文件 夹 下 新 建 一 个 命名 为 TabBarIOSDemojjs 的 文件 , 在 其 中 编写 


如 下 代码 : 


import React,{ 


Component} from 'react'; 


import {TabBarIOS,View,Text} from 'react-native'; 
export default class TabBarIOSDemo extends Component{ 


constructo 


r(props){ 


super (props); 

this.state={ 
itemlSelected:true, 
item2Selected:false 


} 

} 

render (){ 
return 


( 


<TabBarIOS 
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barTintColor="green" 

style={ {height:49}} 

tintColor="red" 

unselectedItemTintColor="white" 

translucent={false}> 
<TabBarIOS .Item 
title=" 历 史 " 
systemIcon="history" 


selected={this.state.itemlSelected} 


badge={1} 
onPress={ ()=>{ 
this.setState({ 
itemlSelected:true, 
item2Selected:false 
}); 
和 
<View> 


<Text style={{top:100,textAlign:'center', 


fontSize:30}}> 历 史 界 面 </Text> 
</View> 
</TabBarIOS .Item> 
<TabBarIOS .Item 
title=" 数 学 " 


systemIcon="bookmarks" 


selected={this.state.item2Selected} 


onPress={ ()=>{ 
this.setState({ 
itemlSelected:false, 
item2Selected:true 
}) 7 
}}> 
<View> 


<Text style={{top:100,textAlign:'center', 


fontSize:30}}> 数 学 界面 </Text> 
</View> 
</TabBarIOS .Item> 
</TabBarIOS> 
) 


} 


TabBarIOS 组 件 中 的 属性 用 来 配置 导航 栏 ， 是 一 个 双 标签 ， 其 中 需要 嵌 套 TabBarIOS.Item 组 


件 。Item 组 件 用 来 配置 标 
视图 的 编写 。 在 iOS 平台 运行 工程 ， 效 果 如 图 7-10 所 示 。 





:中 每 个 具体 的 标签 ， 也 是 一 个 双 标 签 ， 在 Item 组 件 中 进行 对 应 界面 
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TabBarIOS 组 件 十 分 简洁 ， 扩 展 于 View 组 件 ， 默 认可 以 使 用 View 组 件 中 包含 的 属性 ， 其 他 
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用 于 配置 标签 栏 的 属性 如 表 7-13 所 示 。 





7-10 TabBarIOS 组 件 效果 


表 7-13 TabBarlOS 组 件 属性 














属性 名 解释 平台 值 类 型 或 可 选 值 
unselectedTintColor 设置 未 选中 状态 下 的 标签 em 文字 颜色 ”| i0S 颜色 字符 串 
tintColor 设置 选中 状态 下 的 标签 lem 图 标 颜 色 iOS 颜色 字符 串 
unselectedItemTintColor 设置 未 选中 状态 下 的 标签 Item 图 标 颜色 iOS 颜色 字符 串 
barTintColor 设置 标签 栏 背景 色 iOS 颜色 字符 串 
translucent 设置 标签 栏 是 否 半 透 明 iOS 布尔 值 

枚 举 字符 串 
itemPositioning 设置 标签 栏 中 标签 tem 图 标 显示 模式 iOS ”和 充 清 

。 center: 居中 

。 auto: 自动 











TabBarIOS.Item 实际 上 是 TabBarIOSItem 组 件 ， 其 中 提供 的 常用 属性 如 表 7-14 所 示 。 


属性 名 
badge 


设置 此 标签 头 标 气泡 显示 的 文案 


表 7-14 ”TabBarlOS .ltem 的 常用 属性 


值 类 型 或 可 选 值 


字符 串 或 数值 





badgeColor 


设置 此 标签 头 标 气泡 的 颜色 


颜色 字符 串 





SystemJcon 





设置 此 标签 显示 为 系统 图 标 


iOS 








枚 举 字符 串 


bookmarks: 书库 图 标 
contacts: 联系 人 图 标 
downloads: 下 载 图 标 
favorites: 偏好 图 片 
history: 历史 图 标 
more: 更 多 图 标 
most-recent: 最 近 图 标 
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( 续 表 ) 
属性 名 解释 于 全 值 类 型 或 可 选 值 

。 most-viewed: 浏览 图 标 
systemlcon 设置 此 标签 显示 为 系统 图 标 iOS . ee J 

。 top-rated: 排行 图 标 
icon 为 此 标签 设置 一 个 自 定义 的 图 标 iOS 本 地 图 片 素材 
selectedIcon 为 此 标签 设置 一 个 选中 状态 的 图 标 iOS 本 地 图 片 素材 
onPress 当 单 击 标签 时 触发 的 回调 iOS 函数 
TrenderAsOriginal 图 标的 演 染 是 否 保持 原始 状态 iOS 布尔 值 
selected 设置 此 标签 是 否 选中 iOS 布尔 值 
style 设置 标签 的 风格 属性 iOS style 对象 
title 设置 标签 的 标题 iOS 字符 串 








注意 ，TabBarIOSItem 组 件 是 一 个 受 控 组 件 ， 也 就 是 说 除非 手动 修改 selected 属性 的 值 ， 


否则 标签 的 选中 状态 不 会 随 用 户 的 操作 进行 修改 。 通 常情 况 下 , 开发 者 会 通过 属性 来 确定 标签 栏 的 


选中 状态 ， 当 onPress 方法 被 调用 时 来 进行 属性 的 刷新 。 


在 iOS 原生 开发 中 ， 一 种 常用 的 界面 搭建 框架 便 是 在 标签 栏 中 嵌 套 导航 ， 标 签 栏 并 列 展 示 





几 个 功能 模块 ， 导 航 来 控制 控 能 模块 中 子 级 界面 的 切换 。 


React Native 技能 进 阶 


通过 前 几 章 的 学 习 , 你 已 经 学 会 了 使 用 React Native 中 大 部 分 组 件 编写 一 些小 


的 有 趣 的 示例 程 


序 。 看 到 自己 的 学 习 成 果 在 iOS 或 Android 设备 上 成 功 运行 时 ,你 一 定 体会 到 了 编程 的 喜悦 。 但 是 ， 


要 掌握 开发 完整 商业 应 用 的 能 力 , 仅仅 学 会 使 用 这 些 独 立 组 件 是 远 远 不 够 的 , 你 需 
件 进行 适当 的 组 合 与 嵌 套 才能 构建 完整 的 界面 ,将 界面 再 通过 导航 器 或 标签 器 适当 
完整 的 应 用 程序 。 你 还 需要 学 习 使 用 网 络 技术 来 获取 互联 网 上 的 数据 供 自己 的 应 月 
存储 技术 对 下 载 的 数据 进行 持久 化 保存 等 。 所 以 ， 你 的 React Native 学 习 之 旅 任 重 
油 吧 ! 

有 关 React Native 中 的 界面 布局 技术 , 虽然 在 前 面 的 学 习 中 ， 有 意 或 无 意 地 使 
的 布局 属性 ， 但 是 和 React Native 完整 的 布局 模型 比 起 来 ， 你 体验 到 的 只 是 冰山 一 
学 习 ， 你 将 能 够 根据 设计 图 完成 复杂 而 精准 的 布局 。 本 章 还 会 介绍 React Native 中 
动 应 用 的 出 彩 之 处 便 在 于 其 支持 强大 的 动画 特效 , 恰当 地 使 用 动画 ,可 以 极 大 地 提 





要 将 这 些 独 立 组 
地 管理 才能 构成 
程序 所 用 , 使 用 
而 道 远 ， 继 续 加 


和 到 了 一 些 简 单 
角 ， 通 过 本 章 的 
的 动画 技术 ， 移 
高 用 户 体验 。 网 





络 和 数据 存储 技术 在 开发 完整 应 用 程序 中 也 是 必 不 可 少 的 。 除 此 之 外 ， 本 章 还 将 介绍 React Native 


中 的 更 多 进 阶 技 巧 ， 例 如 警告 弹 框 、 键 盘 、 通 知 等 技术 。 
8.1 React Native 布局 技术 


有 界面 就 有 布局 ， 界 面 不 可 能 脱离 布局 独立 存在 。React Native 中 界面 的 布局 
的 嵌 套 与 组 合 ， 你 可 以 使 用 Flexbox 思想 来 对 React Native 中 的 组 件 做 精准 的 定位 


实质 上 就 是 组 件 


Flexbox 是 Web 开发 中 的 一 种 布局 模式 ， 其 常常 被 叫 作 弹 性 盒 布局 模式 。 如 今 Web 界面 的 
开发 多 采用 div+css 模式 ， 其 实际 上 就 是 这 种 弹性 念 布局。 
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8.1.1 布局 中 的 主轴 与 次 轴 


在 HelloWorld 工程 的 Demo 文件 夹 下 新 建 一 个 命名 为 LayoutDemo.js 的 文件 ， 在 其 中 编写 如 
下 代码 : 


import React, {Component} from 'react'; 
import {View} from ‘react-native'; 
export class LayoutDemoOne extends Component{ 
render (){ 
return( 
<View> 
<View style={{backgroundColor:'red',height:30, 
width:30}}></View> 
<View style={{backgroundColor:'green',height:30, 
width:30}}></View> 
<View style={{backgroundColor:'blue',height:30, 
width:30}}></View> 
<View style={{backgroundColor:'black',height:30, 
width:30}}></View> 
</View> 
); 


} 
需要 注意 ， 这 个 例子 和 我 们 之 前 写 的 例子 有 略微 的 不 同 ， 其 并 没有 设置 导出 的 类 为 默认 类 ， 


这 是 因为 本 节 你 将 在 同一 个 文件 中 编写 多 个 布局 测试 类 。 修 改 index.iosjs 与 index.androidjs 文件 后 
运行 工程 ， 可 以 看 到 效果 如 图 8-1 所 示 ，4 个 View 组 件 依次 垂直 排列 。 








导出 的 类 如 果 没 有 使 用 default 修饰 为 默认 导出 类 ， 则 在 index 文件 中 导入 时 需要 使 用 如 下 


方式 : 


import {LayoutDemoone} from './Demo/LayoutDemo'; 





从 上 面 的 示例 可 以 看 出 ， 默 认 的 视图 排列 方式 是 竖 直 排列 的 ， 每 个 子 组 件 占 其 父 组 件 内 的 一 
行 空间 。 其 实在 React Native 布局 结构 中 ， 父 容器 组 件 可 以 通过 设置 相应 的 布局 属性 来 设置 其 中 子 
组 件 的 主轴 布局 方向 。 所 谓 主轴 布局 方向 ， 是 指 此 组 件 内 部 的 组 件 以 何 种 流 式 方向 进行 布局 ， 主 要 
分 为 水 平和 竖 直 两 种 ， 当 然 水 平 布局 又 分 为 从 左 向 右 与 从 右 向 左 , 竖 直 布局 又 分 为 从 上 到 下 与 从 下 
到 上 。 通 过 父 容器 组 件 的 flexDirection 属性 来 进行 子 组 件 的 布局 方向 设置 , 其 可 以 设置 的 值 有 4 种 ， 
如 表 8-1 所 示 。 
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表 8-1 flexDirection 属 性 值 











属性 值 说 明 
row 从 左 向 右 水 平 布局 
TOW-reverse 从 右 向 左 水 平 布局 
column 从 上 到 下 竖 直 布局 








column-reverse 


从 下 到 上 竖 直 布局 
例如 ， 将 上 面 示例 代码 的 主轴 布局 方向 修改 为 row， 代 码 如 下 ， 效 果 如 图 8-2 所 示 。 


<View style={{flexDirection:'row'}}> 
<View style={{backgroundColor:'red',height:30,width:30}}></View> 
<View style={{backgroundColor:'green',height:30,width:30}}></View> 
<View style={{backgroundColor:'blue',height:30,width:30}}></View> 
<View style={{backgroundColor:'black',height:30,width:30}}></View> 
</View> 


2:37 PM 本 








图 8-1 默认 的 布局 排列 方式 图 8-2 ”进行 水 平 布局 


从 上 面 的 布局 效果 可 以 看 出 ， 各 个 子 组 件 是 从 父 组 件 的 边缘 紧密 连续 布局 的 ， 可 以 通过 设置 
父 容器 组 件 的 justifyContent 属性 来 设置 子 组 件 的 布局 模式 ， 可 选 值 如 表 8-2 所 示 。 
表 8-2 justifyContent 属 性 值 























属性 值 说 明 
flex-start 从 父 容器 起 始 端 开始 布局 
flex-end 从 父 容器 结束 端 开始 布局 
center 从 父 容器 中 心 开始 布局 
Space-around 预 留 边 距 并 且 子 组 件 间 也 等 间距 布局 
space-between 不 留 边 距 并 且 子 组 件 间 等 间距 布局 


修改 代码 如 下 ， 再 次 运行 ， 效 果 如 图 8-3 所 示 。 


<View style={{flexDirection:'row',justifyContent:"space-around"}}> 
<View style={{backgroundColor:'red',height:30,width:30}}></View> 
<View style={{backgroundColor:'green',height:30,width:30}}></View> 
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<View style={{backgroundColor:'blue',height:30,width:30}}></View> 
<View style={{backgroundColor:'black',height:30,width:30}}></View> 


</View> 


在 布局 的 过 程 中 ， 默 认 父 容器 组 件 的 尺寸 会 根据 其 内 部 子 组 件 所 占 空间 进行 调整 〈 这 也 是 
Flexbox 布局 思想 的 核心 ) ， 也 可 以 手动 指定 父 容器 组 件 的 尺寸 ， 如 果 指 定 父 组 件 的 尺寸 要 比 其 内 


子 组 件 所 占 尺 寸 大 得 多 ， 就 可 能 需要 使 用 到 父 容器 组 件 的 alignItems 








属性 ， 这 个 属性 用 来 设置 子 组 








件 在 次 轴 方 向 的 布局 方式 。 次 轴 是 指 与 主轴 所 垂直 的 轴 ， 例 如 ， 如 果 主 轴 为 水 平方 向 ， 则 次 轴 就 是 
竖 直方 向 ， 如 果 主 轴 是 竖 直 方向 ， 那 么 次 轴 就 是 水 平方 向 。alignItems 可 设置 的 值 如 表 8-3 所 示 。 
表 8-3 alignltems 属 性 值 
属性 值 说 明 

flex-start 从 次 轴 起 始 端 开始 布局 

flex-end 从 次 轴 结束 端 开始 布局 

center 从 次 轴 中 间 开 始 布局 

子 组 件 在 次 轴 方向 上 的 尺寸 充满 容器 ， 这 个 属性 要 想 生 效 ， 子 组 件 不 可 以 有 对 应 方向 上 的 尺 
stretch 寸 值 设置 





修改 布局 代码 如 下 ， 再 次 运行 工程 ， 效 果 如 图 8-4 所 示 。 
<View style={{flexDirection:'row', 
justifyContent:"space-around", 
height:300, 
alignItems:'center', 
backgroundColor: 'yellow' 
}}> 


<View style={{backgroundColor:'red',height:30,width:30}}></View> 
<View style={{backgroundColor:'green',height:30,width:30}}></View> 
<View style={{backgroundColor:'blue',height:30,width:30}}></View> 
<View style={{backgroundColor:'black',height:30,width:30}}></View> 


</View> 


如 果 需 要 各 个 子 组 件 在 次 轴 上 有 不 同 的 布局 模式 ， 可 以 直接 设置 子 组 件 的 alignSelf 属性 ， 可 

















选 值 如 表 8-4 所 示 。 
表 8-4 alignSelf 属 性 值 
属性 值 说 明 
auto 自动 继承 父 容器 的 alignSelf 的 值 
felx-start 从 父 容器 次 轴 起 始 端 开始 布局 
flex-end 从 父 容器 次 轴 结 束 端 开始 布局 
center 从 父 容器 次 轴 中 心 开始 布局 
stretch 充满 父 容器 次 轴 





修改 布局 代码 如 下 ， 运 行 工程 ， 效 果 如 图 8-5 所 示 。 
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<View style={{flexDirection:"'row', 
justifyContent:"space-around", 
height:300, 
alignItems:'center', 
backgroundColor: 'yellow' 
By 
<View style={{backgroundColor:'red',alignSelf:'stretch', 
width:30}}></View> 
<View style={{backgroundColor:'green',alignSelf:'flex-start',height:30, 
width:30}}></View> 
<View style={{backgroundColor:'blue',alignSelf:'flex-end',height:30, 
width:30}}></View> 
<View style={{backgroundColor:'black',alignSelf:'center',height:30, 
width:30}}></View> 
</View> 


可 EE 








图 8-3 ”等 间距 进行 布局 图 8-4 在 次 轴 上 进行 居中 布局 图 8-5 灵活 设置 子 组 件 的 次 轴 布 局 模式 


理解 与 掌握 了 本 小 节 中 介绍 的 Flexbox 布局 思想 ， 基 本 就 可 以 在 React Native 中 完成 大 部 分 界 
面 布局 效果 了 。 如 果 一 个 界面 既 有 水 平 布局 的 元 素 也 有 竖 直 布局 的 元 素 该 怎么 办 呢 ? 其 实 很 简单 ， 
合理 地 进行 组 件 的 嵌 套 即 可 。 例 如 ， 可 以 在 竖 直 布 局 的 View 中 婴 套 几 个 水 平 布局 的 View， 也 可 
以 在 水 平 布局 的 View 中 继续 嵌 套 紧 直 布局 的 View， 总 之 同样 的 界面 布局 的 方式 多 种 多 样 ， 正 如 
一 名 谚语 所 说 “条 条 大 路 通 罗马 ”。 
8.1.2 ”精准 定义 组 件 的 尺寸 

通过 上 一 小 节 的 学 习 ， 应 该 学 会 了 如 何 通过 主轴 与 次 轴 进 行 简单 的 组 件 排 布 。 确 定 组 件 的 位 
置 只 是 界面 布局 中 的 一 个 部 分 ， 更 重要 的 是 可 以 灵活 地 控制 组 件 的 尺寸 。 在 React Native 中 ， 组 件 
的 尺寸 可 以 直接 通过 设置 width 和 height 属性 进行 确定 ， 这 也 是 前 面 示例 代码 我 们 常 采 用 的 方式 ， 
在 LayoutDemo.js 文件 中 新 创建 一 个 类 ， 代 码 如 下 : 


export class LayoutDemoTwo extends Component{ 





render () { 
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return( 
<View style={{height:300,flexWrap:'nowrap',backgroundColor: 
'yellow',overflow:'visible'}}> 
<View style={{backgroundColor:'red',width:30, height:30}}> 


</View> 

<View style={ {backgroundColor: 'green',width:30, height:60}}> 
</View> 

<View style={{backgroundColor:'blue',width:80, height:30}}> 
</View> 


<View style={{backgroundColor:'black',width:30, 
height:100}}></View> 
</View> 


运行 工程 ， 效 果 如 图 8-6 所 示 。 

上 面 示例 代码 中 的 子 组 件 高 度 和 并 没有 超出 父 组 件 ， 如 果 组 件 的 高 度 和 超出 了 父 组 件 高 度 ， 
就 可 以 通过 以 下 两 种 方式 来 处 理 。 

1. 设置 超出 部 分 被 截取 或 者 超出 部 分 依然 显示 

子 组 件 超出 部 分 的 显 隐 可 以 通过 overflow 属性 来 进行 设置 ， 如 果 设 置 为 visiable， 则 超出 部 分 
依然 可 以 显示 ， 如 果 设 置 为 hidden， 则 超出 部 分 会 被 隐藏 ， 示 例 代码 如 下 : 





<View style={{height:300,flexWrap:'nowrap',backgroundColor:'yellow', 
overflow:'visible'}}> 
<View style={{backgroundColor:'red',width:30,height:30}}></View> 
<View style={{backgroundColor:'green',width:30,height:60}}></View> 
<View style={{backgroundColor:'blue',width:80,height:30}}></View> 
<View style={{backgroundColor:'black',width:30,height:300}}></View> 
</View> 


运行 工程 ， 效 果 如 图 8-7 所 示 。 
2. 通过 设置 自动 折 行 来 排 布 子 组 件 


设置 父 组 件 的 flexWrap 属性 可 以 实现 超出 父 容器 组 件 的 子 组 件 折 行 显示 ， 这 个 属性 设置 为 
warp 则 表示 要 支持 折 行 ， 设 置 为 nowarp 表示 不 支持 折 行 ， 示 例如 下 : 


<View style={{height:300,flexWrap:'nowrap',backgroundColor:'yellow', 
overflow: 'visible',flexWrap: 'wrap'}}> 
<View style={{backgroundColor:'red',width:30,height:30}}></View> 
<View style={{backgroundColor:'green',width:30,height:60}}></View> 
<View style={{backgroundColor:'blue',width:80,height:30}}></View> 
<View style={{backgroundColor:'black',width:30,height:300}}></View> 
</View> 
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图 8-6 ”精确 定义 控件 的 尺寸 图 8-7 超出 父 组 件 的 部 分 依然 显示 
运行 效果 如 图 8-8 所 示 。 
通过 width 和 height 属性 可 以 达到 精准 定义 组 件 尺寸 的 目的 , 但 是 在 实际 开发 中 , 通常 并 不 会 
将 组 件 的 尺寸 定义 死 ， 尤 其 是 在 移动 设备 上 ， 屏 幕 的 尺寸 众多 ， 相 同 的 设备 还 有 横竖 屏 之 分 ， 因此 
开发 者 通常 采用 权重 值 的 方式 来 定义 组 件 的 尺寸 。flex 属性 用 来 设置 组 件 的 权重 值 ， 权 重 相 同 的 组 
件 在 主轴 方向 占据 父 容器 中 相同 的 宽度 ， 示 例 代码 如 下 : 


<View style={{height:300,flexWrap:'nowrap',backgroundColor:'yellow', 





overflow: 'visible',flexWrap: 'wrap'}}> 
<View style={{backgroundColor:'red',width:30,flex:1}}></View> 
<View style={{backgroundColor:'green',width:30,flex:1}}></View> 
<View style={{backgroundColor:'blue',width:80,flex:2}}></View> 
<View style={{backgroundColor:'black',width:30,flex:4}}></View> 





</View> 
上 面 代码 设置 的 第 1 个 子 组 件 与 第 2 个 子 组 件 占据 相同 的 宽度 ， 第 3 个 子 组 件 宽度 是 前 两 个 
的 两 倍 ， 第 4 个 子 组 件 的 宽度 是 第 3 个 子 组 件 的 两 倍 ， 效 果 如 图 8-9 所 示 。 


图 8-8 子 组 件 自动 折 行 图 8-9 通过 权重 确定 子 组 件 的 尺寸 
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React Native 中 还 提供 了 maxHeight、maxWidth、minHeight、minWidth 几 个 属性 ， 这 个 4 个 
属性 分 别 用 来 设置 组 件 的 最 大 高 度 、 最 大 宽度 、 最 小 高 度 和 最 小 宽度 。 通 过 这 几 个 最 值 与 权重 的 结 
合 使 用 ， 可 以 使 React Native 的 布局 结构 更 加 灵活 。 


8.1.3 ”相对 定位 与 绝对 定位 
React Native 在 进行 组 件 布局 定位 时 分 为 相对 定位 与 绝对 定位 ， 默 认 情况 下 都 是 相对 定位 的 。 


所 谓 相对 定位 ， 是 指 相对 于 组 件 本 来 应 在 的 位 置 进 行 偏 移 ， 例 如 可 以 使 用 top、bottom、left、right 
属性 对 组 件 的 位 置 进行 微调 ， 在 LayoutDemojs 文件 中 新 建 一 个 类 ， 示 例 代 码 如 下 : 


export class LayoutDemoThree extends Component{ 








render (){ 
returnl( 
<View style={{height:300,backgroundColor:'yellow', 
alignItems:'center'}}> 
<View style={{backgroundColor:'red',width:30,height:30, 
bottom:10}}></View> 
<View style={{backgroundColor:'green',width:30,height:30, 
left:30}}></View> 
<View style={{backgroundColor:'blue',width:80, 
height:30}}></View> 
<View style={{backgroundColor:'black',width:30,height:30, 
right:10,top:30}}></View> 
</View> 
); 


} 
运行 工程 ， 效 果 如 图 8-10 所 示 。 
top、bottom、left、right 这 4 个 属性 只 是 针对 原 定位 位 置 的 调整 ， 并 不 会 影响 到 周围 组 件 的 布 
局 位 置 ,通过 设置 position 属性 可 以 修改 定位 模式 , 设置 为 absolute 则 表示 绝对 布局 , 设置 为 relative 
则 表示 为 相对 布局 。 默 认为 relative， 如 果 设 置 为 absolute 则 上 面 4 个 属性 是 相对 于 父 容器 进行 定 
位 ， 示 例如 下 : 


export class LayoutDemoThree extends Component{ 





render (){ 
return( 
<View style={{height:300,backgroundColor:'yellow'}}> 

<View style={{backgroundColor:'red',width:30,height:30, 
position:'absolute',top:30}}></View> 

<View style={{backgroundColor:'green',width:30,height:30, 
position:'absolute',top:100, left:100}}></View> 

<View style={{backgroundColor:'blue',width:80,height:30, 
position:'absolute',top:30,1left:100}}></View> 

<View style={{backgroundColor:'black',width:30,height:30, 
position:'absolute',bottom:50}}></View> 
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</View> 
); 


} 
运行 工程 ， 效 果 如 图 8-11 所 示 。 








国 
国 
图 8-10 对 组 件 的 定位 进行 调整 图 8-11 对 组 件 进行 绝对 定位 


React Native 中 还 提供 了 与 margin 相关 的 属性 , 可 以 用 来 设置 组 件 的 外 间距 。margin 相关 属性 
如 表 8-5 所 示 。 


表 8-5 margin 的 相关 属性 





属性 说 明 
marginTop 设置 组 件 上 外 边 距 
marginBottom 设置 组 件 下 外 边 距 
marginLeft 设置 组 件 左 外 边 距 
marginRight 设置 组 件 右 外 边 距 





marginHorizontal | 设置 组 件 水 平 边 距 (相当 于 同时 设置 marginLeft 与 marginRight) 
margin Vertical 设置 组 件 竖 直 边 距 (相当 于 同时 设置 marginTop 与 marginBottom) 
margin 设置 组 件 外 边 距 (相当 于 同时 设置 marginTop、marginBottom、marginLeft 与 marginRight) 


示例 代码 如 下 : 











export class LayoutDemoThree extends Component{ 
render (){ 
return( 
<View style={{height:300,backgroundColor:'yellow'}}> 

<View style={{backgroundColor:'red',width:30,height:30, 
marginTop:30}}></View> 

<View style={{backgroundColor:'green',width:30,height:30, 
marginLeft:30}}></View> 
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<View style={{backgroundColor:'blue',width:80,height:30, 
marginBottom:30}}></View> 
<View style={{backgroundColor:'black',width:30,height:30, 
marginRight:30}}></View> 
</View> 


} 

运行 工程 ， 效 果 如 图 8-12 所 示 。 

与 margin 相关 属性 对 应 ， 你 也 可 以 通过 padding 相关 属性 设置 组 件 的 内 边 距 ， 组 件 的 内 边 距 
会 影响 其 内 子 组 件 的 布局 位 置 ， 和 示例 代码 如 下 : 


export class LayoutDemoThree extends Component{ 





render (){ 
return( 
<View style={{height:300,backgroundColor:'yellow',paddingTop:30, 
paddingLeft:30}}> 
<View style={{backgroundColor:'red',width:30, 
height:30}}></View> 
<View style={{backgroundColor:'green',width:30, 
height:30}}></View> 
<View style={ {backgroundColor: 'blue',width:80, 
height:30}}></View> 
<View style={{backgroundColor:'black',width:30, 
height:30}}></View> 
</View> 


} 
运行 工程 ， 效 果 如 图 8-13 所 示 。 


re ET 


一 


ET ET | 








图 8-12 设置 组 件 的 外 边 距 图 8-13 设置 组 件 的 内 边 距 
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需要 注意 , 如 果 在 定位 过 程 中 组 件 位 置 有 重 登 , 可 以 使 用 zIndex 属性 设置 组 件 的 层级 ,zIndex 
的 数值 越 大 ， 视 图 层级 越 高 ， 





8.2 ”React Native 中 的 颜色 定义 


前 面 已 经 写 了 不 少 React Native 代码 ， 在 定义 组 件 时 ， 通 常会 设置 组 件 的 颜色 属性 。 在 React 
Native 中 ， 颜 色 的 设置 采用 的 是 特殊 格式 的 颜色 字符 串 或 十 六 进 制 的 表示 颜色 的 数值 。 
在 React Native 中 定义 颜色 有 表 8-6 所 示 的 几 种 格式 。 
表 8-6 React Native 定义 颜色 的 格式 

















格式 描述 
#000' 十 六 进 制 RGB 格式 ， 是 "#rrggbb" 格 式 的 缩写 
#0000' 十 六 进 制 RGBA 格式 ， 是 "#rrggbbaa" 格 式 的 缩写 
#000000' 十 六 进 制 RGB 格式 
#00000000 十 六 进 制 RGBA 格式 
‘rgb(255,255,255) 十 进 制 RGB 格式 
‘rgba(255,255,255,1.0) 十 进 制 RGBA 格式 
‘hsl(360,100%,100%) HSL 格式 
‘hsla(260,100%,100%,1.0) HSLA 格式 
"transparent 透明 颜色 
Ted' 颜色 名 称 格式 
0x00000000 十 六 进 制 数值 RGBA 格式 


也 可 以 直接 使 用 颜色 名 称 来 定义 颜色 ，React Native 中 内 置 了 表 8-7 中 列 出 的 可 用 颜色 。 
表 8-7 React Native 的 可 用 颜色 





























名 称 颜色 名 称 颜色 

aliceblue 爱丽 丝 蓝 lightpink 亮 粉 

antiquewhite 古董 白 lightsalmon 浅 肉色 
aqua 青 lightseagreen 浅海 绿 
aquamarine 蓝 绿 lightskyblue 浅 天 蓝 
azure 蔚蓝 lightslategray 浅 石灰 
beige 米黄 lightslategrey 浅 石灰 
bisque 橘 黄 lightsteelblue 浅 钢 蓝 
black 黑 lightyellow 浅黄 

blanchedalmond 杏仁 白 lime 青 柠 色 
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( 续 表 ) 

名 称 颜色 名 称 颜色 
blue 蓝 limegreen 青 柠 绿 
blueviolet 蓝 紫 linen 亚麻 色 
brown 棕 magenta 品 红 
burlywood 原木 棕 maroon 桨 紫 
cadetblue 军校 蓝 mediumaquamarine 碧绿 
chartreuse 黄 绿 mediumblue 中 蓝 
chocolate 巧克力 色 mediumorchid 间 紫 
coral 珊瑚 色 mediumpumle 中 紫 
cornflowerblue 矢 车 菊 蓝 mediumseagreen 中 海 绿色 
cornsilk 米 绸 色 mediumslateblue 中 石板 蓝 
crimson 深 红 mediumspringgreen 亮 绿 
Cyan 天 蓝 mediumturquoise 中 宝石 绿 
darkblue 暗 蓝 mediumvioletred 中 紫罗兰 
darkcyan 深 青 midnightblue 深夜 蓝 
darkgoldenrod 金 橘 黄 mintcream 奶油 色 
darkgray 深 灰 mistyrose 雾 玫 现 色 
darkgreen 墨绿 moccasin 卡其 
darkgrey 黑 灰 navajowhite 军装 白 
darkkhaki 深 卡其 navy 海军 蓝 
darkmagenta 深 洋红 oldlace 浅 米色 
darkolivegreen 暗 橄榄绿 olive 橄榄 色 
darkorange 深 桶 olivedrab 深 绿 褐色 
darkorchid 深 紫 orange 橙色 
darkred 深 红 orangered 橙 红色 
darksalmon 深 橙 红 orchid 兰花 色 
darkseagreen 深海 绿 palegoldenrod 浅 橘 黄色 
darkslateblue 深 板 岩 蓝 palegreen 仓 绿 色 
darkslategray 深 石 板 灰 paleturquoise 架 绿 色 
darkslategrey 暗 石 板 灰 palevioletred 青紫 罗兰 色 
darkturquoise 暗 宝 石 绿 papayawhip 番 木 色 
darkviolet 暗 紫 罗兰 peachpu 人 ff 桃色 
deeppink 深 粉 色 peru 秘鲁 褐 
deepskyblue 深 天 蓝 色 pink 粉色 
dimgray 暗 灰 plum 紫红 色 
dimgrey 暗 灰 powderblue 粉 蓝 色 
dodgerblue 闪 蓝 色 purple 紫 
firebrick 火 砖 红 rebeccapurple 深 紫 
floralwhite 花白 red 红 
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( 续 表 ) 

名 称 颜色 名 称 颜色 
forestgreen 森林 绿 rosybrown 褐 玫瑰 红 
fuchsia 紫红 royalblue 宝蓝 
gainsboro 淡 灰 saddlebrown 重 褐色 
ghostwhite 幽灵 和 白 salmon 竹 红 
gold 金色 sandybrown 黄 褐 
goldenrod 浓 黄 seagreen 海 绿色 
gray 灰 seashell 贝壳 色 
green 绿 sienna 黄土 色 
greenyellow 绿 黄 silver 银 
grey 灰 skyblue 天 蓝 
honeydew 蜜 瓜 色 slateblue 石 蓝 
hotpink 深 粉 slategray 石灰 
indianred 印度 红 slategrey 石灰 
indigo 靛蓝 Snow 雪白 
ivory 象牙 色 springgreen 青绿 
khaki 土 黄 steelblue 钢 青 色 
lavender 淡 紫 tan 棕 黄 
lavenderblush 淡 紫 红 teal 蓝 绿 
lawngreen 草坪 绿 thistle 葡 色 
lemonchiffon 柠檬 网 tomato 番茄 色 
lightblue 亮 蓝 turquoise 松 绿色 
lightcoral 亮 珊瑚 Violet 蓝 紫 
lightcyan 亮 天 蓝 Wheat 麦 黄 
lightgoldenrodyellow 亮 金黄 white 白 
lightgray 亮 灰 whitesmoke 烟 白 
lightgrey 亮 灰 yellow 黄 
lightgreen 亮 绿 yellowgreen 黄 绿 








8.3 警告 弹 窗 的 应 用 


当 用 户 在 进行 敏感 操作 时 ， 开 发 者 往往 需要 通过 弹出 警告 框 的 方式 来 让 用 户 对 自己 的 操作 进 
行 确认 ， 在 React Native 中 提供 了 两 种 组 件 来 弹出 警告 框 : 跨 平台 的 Alert 组 件 和 iOS 平台 专用 的 
AlertIOS 组 件 。 
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8.3.1 _ Alert 组 件 的 应 用 


Alert 是 一 个 跨 平台 的 警告 框 ， 在 HelloWorld 工程 的 Demo 文件 夹 下 新 建 一 个 命名 为 
AlertDemojs 的 文件 ， 在 其 中 编写 如 下 代码 : 


import React, {Component} from 'react'; 
import {View,Button,Alert} from 'react-native'; 
export default class AlertDemo extends Component{ 
render (){ 
return( 
<View> 
<Button height={30} title="ALERT" 
onPress={ ()=>{ 
Alert.alert( 
"警告 "， 
"天 干 物 燥 ， 小 心 火 烛 "， 
[ 
{text: ' 进 入 '，onPress: () => console.log('come 
on')}, 
{text: ' 取 消 '，onPress: () => console.log('cancel')， 
style: 'cancel'}, 
{text: 'OK', onPress: () => console.log('OK Pressed')}, 
I 
ys 
1}/> 
</View> 
yy 


} 
上 面 的 代码 创建 了 一 个 测试 按钮 ， 当 单 击 按钮 时 ， 进 行 警告 框 的 弹出 ， 运 行 工 程 ， 在 iOS 平 
台 与 Android 平台 的 效果 分 别 如 图 8-14 与 图 8-15 所 示 。 





图 8-14 iOS 平 台 的 警告 8-15 Android 平台 的 警告 框 
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在 弹出 警告 框 时 ， 只 需要 直接 调用 Alertalert0 函 数 即 可 ， 这 个 函数 中 最 多 可 以 接收 4 个 参数 ， 
解释 如 表 8-8 所 示 。 


表 8-8 Alertalert() 函 数 参数 











参数 意义 

第 1 个 参数 设置 警告 框 的 标题 ， 设 置 为 字符 串 

第 2 个 参数 设置 警告 框 的 内 容 文案 ， 设 置 为 字符 串 
设置 警告 框 中 提供 的 功能 按钮 ， 需 要 设置 为 按钮 数组 ， 其 中 提供 的 按钮 对 象 可 以 设置 的 
属性 如 下 : 

第 3 个 参数 加 按钮 标题 


onPress: 按钮 触发 方法 

style: 按钮 风格 〈 仅 iOS 有 效 ) 
} 

第 4 个 参数 配置 参数 〈 仅 Android 有 效 ) 





需要 注意 , 对 于 iOS 平台 , 功能 按钮 的 数量 可 以 设置 任意 多 个 , 并 且 可 以 为 它们 提供 一 个 style 
属性 来 设置 风格 。style 属性 可 选 值 有 cancel 和 destructive， 分 别 表示 取消 风格 的 按钮 和 消极 风格 的 
按钮 。 在 Android 平台 ， 你 最 多 可 以 提供 3 个 功能 按钮 ， 并 且 在 Android 设备 上 ， 当 警告 框 弹出 时 ， 
如 果 用 户 单 击 屏幕 , 警告 框 也 会 默认 消失 , 可 以 通过 提供 第 4 个 配置 参数 来 控制 在 警告 框 弹出 用 户 
单 击 屏幕 的 行为 ， 示 例 代码 如 下 : 
<Button height={30} title="ALERT" 
onPress={ ()=>{ 
Alert.alert( 
"警告 "， 
"天 干 物 燥 ， 小 心 火 烛 "， 
[ 





{text: ' 进 入 '，onPress: () => console.log('come on')}, 
{text: ' 取 消 '，onPress: () => console.log('cancel'), style: 


'cancel'}, 
{text: 'OK', onPress: () => console.1log('OK Pressed')}, 
]， 
中 
cancelable:true, 
onDismiss: ()=>{ 
console.log("dismiss"); 
} 
} 
); 
人 


其 中 cancelable 属性 设置 为 true 表示 允许 用 户 单 击 屏幕 取消 警告 框 ， 设 置 为 false 表示 不 允许 
用 户 单 击 屏幕 取消 警告 枉 ，onDismiss 属性 用 来 设置 用 户 单 击 屏幕 取消 警告 框 行为 的 回调 函数 。 
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8.3.2 iOS 平台 专用 警告 框 AlertlOS 


AlertIOS 是 iOS 平台 专用 的 警告 框 ， 不 仅 可 以 像 Alert 一 样 展 示 普 通 的 功能 按钮 ， 还 可 以 添加 
文本 输入 框 。 在 HelloWorld 工程 的 Demo 文件 夹 下 新 建 一 个 命名 为 AlertIOSDemojs 的 文件 ,在 其 
中 编写 如 下 代码 : 


import React, {Component} from 'react'; 
import {View,Button,AlertIOS} from 'react-native'; 


export default class AlertDemo extends Component{ 
render (){ 
return( 
<View> 
<Button height={30} title=" 普 通 的 警告 框 " 
onPress={ ()=>{ 
RAlertIOS .alert( 
"警告 "， 
"天 干 物 燥 ， 小 心 火 烛 "， 
[ 
{text: ' 进 入 !，onPress: () => console.log('come 
on')}, 


{text: ' 取 消 '，onPress: () => console.log('cancel')， 
style: 'cancel'}, 
{text: 'OK', onPress: () => console.1og('OK Pressed') }， 
] 
); 
1}/> 
<Button height={30} title=" 带 文本 框 的 警告 框 " 
onPress={ ()=>{ 
AlertIOS.prompt ( 
"警告 
"天 干 物 燥 ， 小 心 火 烛 "， 
(textObj)=>{ 
console.log (textObj); 
}, 
'login-password', 
'wWwww.abcd@163.com', 
"email-address'" 
) 
和 > 
</View> 
六 


上 面 的 代码 创建 了 两 个 按钮 ， 第 1 个 按钮 弹出 普通 的 警告 框 ， 其 用 法 基本 和 Alert 组 件 一 致 ， 
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第 2 个 按钮 弹出 带 文 本 框 的 警告 框 ， 其 参数 意义 如 表 8-9 所 示 。 
表 8-9 ”警告 框 参数 
参数 意义 
第 1 个 参数 警告 框 标题 ， 需 要 设置 为 字符 串 
第 2 个 参数 警告 框 内 容 ， 需 要 设置 为 字符 串 
第 3 个 参数 单 击 警告 框 OK 按钮 后 回调 的 函数 ， 其 中 会 将 文本 框 中 的 内 容 传 入 





第 4 个 参数 


第 5 个 参数 


设置 警告 框 的 类 型 ， 可 选 枚 举 字符 串 如 下 : 
。 default: 默认 模式 ， 无 文本 框 

。 plain-text: 普通 文本 框 模式 

。 secure-text; 密码 框 模式 

。 login-password: 登录 账户 密码 框 模式 


设置 第 一 个 文本 框 中 的 默认 文字 





第 6 个 参数 


设置 弹出 键盘 类 型 ， 可 选 枚 举 如 下 : 
» default 

» email-address 

» numeric 

» phone-pad 

» ascii-capable 

» numbers-and-punctuation 
» url 

» number-pad 

» name-phone-pad 

» decimal-pad 

» twitter 





» web-search 


运行 工程 ， 带 文本 框 的 警告 框 效果 如 图 8-16 所 示 。 


警告 
天 二 物 烛 ,小 必 火 煌 


wabedB163con 


Cancel 


qiwie ritiyiuiliolp 


asidfigihjikil 





图 8-16 带 文本 框 的 警告 框 
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8.4 ActionSheetlOS 抽 屈 视图 的 应 用 


抽 层 视图 是 React Native 在 iOS 平台 特有 的 一 种 视图 组 件 ， 表 现 为 从 界面 下 方 上 滑 出 抽 导 卡 。 
ActionSheetIOS 支持 两 种 模式 的 抽 居 视图 ， 即 普通 功能 列表 抽 层 与 分 享 视图 抽 层 。 普 通 功 能 列表 的 
抽 层 展示 一 组 功能 按钮 , 用 户 单 击 某 个 按钮 后 开发 者 可 以 实现 自己 的 业务 逻辑 , 分 享 视图 抽 层 的 功 
能 则 更 加 定向 ， 专 门 用 来 进行 “社交 分 享 功能 ”。 


8.4.1 普通 功能 列表 抽 层 


在 HelloWorld 工程 的 Demo 文件 夹 下 新 建 一 个 命名 为 ActionSheetIOSDemo.js 的 文件 , 在 其 中 
编写 如 下 代码 : 


import React, {Component} from 'react'; 
import {ActionSheetIOS,View,Button} from 'react-native'; 
export default class ActionSheetIOSDemo extends Component{ 
render (){ 
return( 
<View> 
<Button title="ActionSheet Normal" onPress={()=>{ 
ActionSheetIOS.showActionSheetWithOptions ({ 
options: ["titlel","title2", "title3","delete", 
soanceLn yy 
cancelButtonIndex:4, 
destructiveButtonIndex:3, 
title:"RActionSheetIOS"， 
message:"message info" 
}, (index)=>{ 
console.log (index); 
}) 7 
}}/> 
</View> 


} 


上 面 代码 中 创建 了 一 个 按钮 ， 单 击 按钮 后 会 弹出 一 组 功能 列表 ， 效 果 如 图 8-17 所 示 。 
showActionSheetWithOptions 方法 中 需要 传 入 两 个 参数 ， 第 一 个 参数 为 配置 对 象 ， 第 二 个 参数 为 用 
户 单 击 抽 居 中 某 个 选项 后 回调 的 函数 , 其 中 会 将 选项 按钮 所 对 应 的 下 标 传 入 。 配置 对 象 中 可 用 属性 
如 表 8-10 所 示 。 
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tile1 


title2 


tile3 


delete 


cancel 


8-17 功能 列表 风格 的 ActionSheetIOS 





表 8-10 showActionSheetWithOptions 方法 参数 配置 对 象 的 属性 





属性 描述 
options 设置 抽 导 列表 功能 按钮 标题 ， 需 要 设置 为 字符 串 数组 
cancelButtonIndex 设置 取消 状态 按钮 所 在 的 下 标 
destructiveButtonIndex 设置 消极 状态 按钮 所 在 的 下 标 
title 设置 抽 层 标题 
message 设置 抽 居 内 容 文 案 





8.4.2 ”分 享 视图 抽 居 


许多 移动 应 用 都 会 接 入 一 些 社会 化 分 享 的 功能 ， 例 如 可 以 将 你 感 兴趣 的 网 页 、 喜 欢 的 图 片 通 
过 社交 平台 、 邮 件 或 短信 分 享 给 朋友 。iOS 系统 自 带 一 套 完整 的 分 享 组 件 ， 可 以 使 用 
showShareActionSheetWithOptions 方法 来 弹出 分 享 视图 ， 示 例 代码 如 下 : 


import React, {Component} from 'react'; 
import {ActionSheetIOS,View,Button} from 'react-native'; 
export default class ActionSheetIOSDemo extends Component{ 
render () { 
return( 
<View> 
<Button title="ActionSheet Share" onPress={()=>{ 
ActionSheetIOS.showShareActionSheetWithOptions ({ 
message:"share info", 
url:"http://www.baidu.com", 
subject:"image Share", 
excludedActivityTypes: [ 
'com.apple.UIKit.activity.PostToTwitter' 
] 
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}, (fail)=>{ 
console.log("fali"+fail); 

}, (success)=>{ 
console.log("success"+success); 

Ds; 

E> 
</View> 
jn 


showShareaActionSheetWithOptions 方法 需要 传 入 3 个 参数 ， 如 表 8-11 所 示 。 


表 8-11 showShareaActionSheetWithOptions 参数 


参数 描述 





第 1 个 参数 


配置 对 象 ， 可 设置 的 属性 如 下 : 

{ 

message: 分 享 的 内 容 

url: 分 享 的 网 址 或 本 地 素材 地 址 

subject: 分 享 的 主题 
excludedActivityTypes: 不 包含 的 分 享 类 型 
. 





第 2 个 参数 
第 3 个 参数 


设置 调用 分 享 视图 出 错 的 回调 
设置 调用 分 享 视图 成 功 的 回调 ， 其 中 会 将 是 否 分 享 成 功 作为 参数 传递 








类 要 


F excludedActivityType 属性 ， 其 需要 设置 为 字符 串 数 组 ， 数 组 中 提供 不 包含 的 分 享 类 型 ， 


如 果 想 对 iOS 默认 提供 的 分 享 平台 有 更 多 了 解 ， 可 以 在 互联 网 上 学 习 iOS 原生 的 UIActivityType 
类 型 。 分 享 视图 效果 如 图 8-18 所 示 。 


pasto ce 
Cancel 


8-18 分享 视 图 抽 层 
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8.5 自 定义 组 件 的 属性 与 使 用 样式 表 


属性 对 于 组 件 来 说 非常 重要 ， 如 果 没 有 属性 ， 就 无 法 对 组 件 进行 个 性 化 的 配置 ， 也 无 法 让 组 
件 对 用 户 的 交互 进行 反应 。 前 面 自 定义 了 不 少 组 件 ， 自 定义 组 件 的 核心 就 是 将 React Native 提供 的 
基础 组 件 进行 组 合 或 嵌 套 , 实现 出 表现 更 加 丰满 、 功 能 更 加 复杂 的 组 件 。 对 于 组 件 风 格 样式 的 设置 ， 
前 面 我 们 直接 通过 定义 风格 样式 对 象 来 完成 ， 其 实 React Native 中 的 StyleSheet 就 是 专门 用 来 定义 
样式 表 的 。 

8.5.1 自 定义 组 件 的 属性 


在 面向 对 象 编 程 思想 中 ， 封 装 是 一 种 十 分 重要 的 特性 。 在 进行 自 定义 React Native 组 件 时 ， 将 
一 些 设置 接口 暴露 在 外 ， 通 过 设置 属性 来 对 自 定义 组 件 进 行 设置 是 一 种 十 分 常用 的 组 件 设计 模式 。 
在 组 件 中 添加 的 自 定义 属性 会 自动 被 React Native 整合 进 组 件 的 props 对 象 中 去 。 

在 HelloWorld 工程 的 Demo 文件 夹 下 新 建 一 个 命名 为 PropsDemo.js 的 文件 ， 在 其 中 编写 如 下 
代码 : 





import React, {Component} from 'react'; 
import {View,Text} from 'react-native'; 
export default class PropsDemo extends Component{ 
render (){ 
return( 
<View backgroundColor={this.props.bgColor}> 
<Text style={{marginTop:100,textAlign:'center', 
fontSize:24}}>{this.props.title}</Text> 
</View> 
); 


3 


上 面 代码 中 外 层 容 器 视图 的 背景 色 与 文本 内 容 都 是 通过 组 件 自身 属性 来 进行 设置 的 ， 将 
index.ios.js 与 index.android.js 文件 修改 如 下 : 

import PropsDemo from './Demo/PropsDemo'; 
export default class HelloWorld extends Component { 

render() { 

return (<PropsDemo bgColor="red" title=" 我 是 标题 "/>); 

} 
} 
AppRegistry.registerComponent ('HelloWorld', () => HelloWorld); 


运行 工程 ， 效 果 如 图 8-19 所 示 。 
通过 对 组 件 的 属性 进行 自 定义 ， 大 大 增加 了 组 件 的 灵活 性 与 可 复 用 性 。 
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图 8-19 自 定义 组 件 属性 
8.5.2 ”通过 StyleSheet 样式 表 定 义 组 件 的 风格 


通过 StyleSheet 可 以 定义 一 组 风格 样式 对 象 , 使 用 这 种 方式 定义 的 风格 对 象 可 以 方便 地 进行 管 
理 与 复 用 。 在 HelloWorld 工程 的 Demo 文件 夹 下 新 建 一 个 命名 为 StyleSheetDemo.js 的 文件 ， 在 其 
中 编写 如 下 代码 : 


import React, {Component} from 'react'; 
import {View,StyleSheet} from 'react-native'; 
export default class StyleSheetDemo extends Component{ 
render (){ 
return( 
<View style={style.container}> 
<View style={style.viewl}></View> 
<View style={style.view2}></View> 
<View style={style.view3}></View> 
</View> 
) 7 
} 
} 
// 定 义 样式 表 
let style = StyleSheet.create({ 
container:{ 
flex:1, 
backgroundColor: 'red' 
}, 
viewl:{ 
height:30, 
marginTop:10, 
backgroundColor: 'blue' 
| 
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view2:{ 
height:50, 
marginTop:20, 
backgroundColor:'green’' 

}, 

view3:{ 
height:40, 
marginTop:20, 
backgroundColor: 'yellow' 

} 

1D); 


修改 index.iosjs 与 index.android.js 文件 后 运行 工程 ， 效 果 如 图 8-20 所 示 。 





图 8-20 使 用 StyleSheet 定义 样式 表 


在 实际 开发 中 ， 建 议 组 件 的 样式 定义 都 采用 StyleSheet 样式 表 这 种 方式 : 首先 ， 将 对 象 定义 


抽 离 到 组 件 标签 之 外 ， 可 以 使 代码 更 加 清晰 、 结 构 更 加 简洁 ; 其 次 ， 这 种 方式 可 以 对 样式 
对 象 进行 复 用 ， 减 少 性 能 的 开销 ; 最 后 ，React Native 官方 团队 也 声明 之 后 会 继续 优化 样式 
表 的 泻 染 速 度 ， 因 此 应 该 尽量 使 用 这 种 方式 。 





8.6 Android 平台 的 时 间 选 择 器 


针对 Android 平台 ，React Native 提供 了 TimePickerAndroid 类 , 用 来 弹出 一 个 时 间 选 择 器 对 话 
框 。 在 HelloWorld 工程 的 Demo 文件 夹 下 新 建 一 个 命名 为 TimePickerAndroidDemo.js 的 文件 ， 在 
其 中 编写 如 下 代码 : 


| 253 


第 8 章 React Native 技能 进 阶 





import React, {Component} from 'react'; 
import {TimePickerAndroid,View,Button} from 'react-native'; 
export default class TimePickerAndroidDemo extends Component{ 
render (){ 
return( 
<View> 
<Button title="Time" onPress={()=>{ 
TimePickerandroid.open( 
{ 
hour:22, 
minute:30, 
is24Hour:true 
}) .then(({minute,hour,action})=>{ 
console.log("success",minute,hour,action); 
}, (fail)=>{ 
console.log ("fail", fail); 
}) 7 
}} /> 
</View> 
) 


} 

TimePickerAndroid 类 的 静态 方法 open 中 需要 传 入 一 个 配置 对 象 , 用 来 对 时 间 选 择 器 进行 初始 
化 ， 其 中 可 以 定义 的 属性 如 表 8-12 所 示 。 

需要 注意 , open 方法 会 返回 一 个 Promiss 对 象 ， 上 面 代码 中 Promiss 的 then 链 中 的 第 1 个 参数 
设置 当 用 户 选 择 时 间 完 成 后 的 回调 (第 2 个 参数 设置 了 时 间 选 择 器 弹出 失败 的 回调 )， 回 调 中 会 传 
入 一 个 包含 minute、hour 和 action 属性 的 参数 ， 属 性 意义 如 表 8-13 所 示 。 





表 8-12 open 方法 传 入 配置 对 象 的 属性 























属性 说 明 
hour 设置 小 时 (0 一 23 ) 
minute 设置 分 钟 (0 一 59) 
is24Hour 设置 是 否 为 24 小 时 制 〈 布 尔 值 ) 
表 8-13 ”回调 参数 
参数 说 明 
minute 用 户 选择 的 分 钟 ， 如 果 用 户 取消 选择 ， 这 个 属性 为 undefined 
hour 用 户 选 择 的 小 时 ， 如 果 用 户 取消 选择 ， 这 个 属性 为 undefined 
J 用 户 的 行为 。 如 果 选 择 了 时 间 ， 这 个 值 为 TimePickerAndroid.timeSetAction; 如 果 用 户 
取消 了 选择 ， 这 个 值 为 TimePickerAndroid. dismissedAction 





修改 index.androidjs 文件 后 ， 运 行 工程 ， 效 果 如 图 8-21 所 示 。 
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8-21 Android 平台 的 时 间 选 择 器 


关于 Promiss 承诺 对 象 构建 任务 链 的 内 容 ， 在 ECAMScript 基础 章节 有 详细 的 介绍 ， 如 果 你 


对 本 节 的 内 容 感觉 有 些 陌 生 ， 建 议 你 回 到 前 面 的 语法 部 分 温习 一 下 。 本 节 是 Promiss 对 象 实 
战 应 用 的 最 好 示例 。 





8.7 ”Android 平台 悬 译 提 示 信 息 Toast 的 应 用 


原生 的 Android 开发 经 常会 使 用 到 Toast 来 弹出 简单 的 悬浮 提示 信息 。React Native 中 的 
ToastAndroid 类 用 来 在 Android 平台 弹出 悬浮 提示 信息 。 在 HelloWorld 工程 的 Demo 文件 夹 下 新 建 
一 个 命名 为 ToastAndroidDemo.js 的 文件 ， 在 其 中 编写 如 下 代码 : 


import React, {Component} from 'react'; 
import {View,Button,ToastAndroid} from 'react-native'; 
export default class ToastAndroidDemo extends Component{ 
render () { 
return( 
<View> 
<Button title="Toast Normal" 
onPress={ ()=>{ 
ToastAndroid.show ("message info", 
ToastAndroid.SHORT); 
Nv 
<Button title="Toast Gravity" 
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onPress={f ()=>{ 
ToastRandroid.showWithGravity ("message info", 
ToastAndroid.LONG,ToastAndroid.CENTER); 
Eh/> 
</View> 


1 

ToastAndroid 类 中 提供 了 两 个 方法 来 弹出 悬浮 提示 ，show 方法 可 以 接收 两 个 参数 ， 第 1 个 参 
数 为 要 显示 的 提示 信息 ， 第 2 个 参数 为 提示 显示 的 时 长 设置 ， 可 选 值 有 ToastAndroid.SHORT 与 
ToastAndroid.LONG 。showWithGravity 方法 也 是 用 来 弹出 悬浮 提示 的 ， 不 同 的 是 show 方法 弹出 的 
提示 默认 显示 在 屏幕 下 方 ，showWithGravity 方法 多 出 一 个 参数 设置 提示 的 显示 位 置 ， 可 设置 的 值 
有 ToastAndroid.CENTER 、ToastAndroid.TOP 和 ToastAndroid.BOTTOM。 

运行 工程 ， 效 果 如 图 8-22 所 示 。 


02s 





图 8-22 ”ToastAndorid 悬浮 提示 


8.8 ”监听 与 控制 Android 设备 返回 键 的 行为 








和 iOS 设备 不 同 的 是 , 几乎 所 有 的 Android 设备 都 会 带 一 个 返回 键 , 通常 情况 下 用 户 单 击 返 区 
按钮 可 以 实现 界面 的 返回 或 者 退出 应 用 程序 。 在 React Native 开发 中 ， 你 也 可 以 监听 用 户 单 击 返 
键 的 动作 来 实现 自己 的 逻辑 。 

监听 用 户 单 击 返 回 键 的 功能 由 React Native 中 的 BackAndroid 类 提供 ， 这 个 类 中 提供 了 3 个 静 
态 方法 ， 如 表 8-14 所 示 。 














互 
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表 8-14 ”BackAndroid 类 的 静态 方法 

















方法 名 解释 参数 
需要 传 入 两 个 参数 ， 第 1 个 参数 为 固 
定 字符 串 "hardwareBackPress"， 表 示 
监听 设备 返回 键 的 按 下 行为 目前 只 
; 这 个 方法 用 来 添加 用 户 单 击 返 回 二 pa i 
! SE ， 参 
addEventListener 按钮 的 监听 事件 支持 监听 这 一 种 行为 ), 第 2 个 参数 为 


回调 函数 ， 这 个 函数 需要 返回 一 个 布 
尔 值 , 如 果 返 回 tue 表示 中 断 监 听 链 ， 
返回 false 表示 不 中 断 监 听 链 

参数 意义 和 addEventListener 方法 完 
全 一 致 

无 


上 面 有 提 到 监听 链 的 概念 ， 实 际 上 你 可 以 多 次 调用 BackAndroid 类 的 addEventListener 方法 来 
添加 多 个 监听 回调 ， 当 用 户 单 击 Android 设备 的 返回 按钮 后 ， 系 统 会 一 次 按照 监听 方法 的 添加 顺序 
逆序 调用 监听 函数 ， 其 中 如 果 有 返回 true， 则 中 断 此 调用 链 。 

在 HelloWorld 工程 的 Demo 文件 夹 下 新 建 一 个 命名 为 BackAndroidDemo.js 的 文件 ， 在 其 中 编 
写 如 下 代码 : 


import React, {Component} from 'react'; 









removeEventListener | 这 个 方法 用 来 移 除 一 个 监听 事件 | Android 








exitApp 调用 这 个 方法 直接 退出 应 用 程序 | Android 


import {BackAndroid,View,Button} from 'react-native'; 
export default class BackAndroidDemo extends Component{ 
constructor (props){ 
super (props); 
BackAndroid.addEventListener ("hardwareBackPress",this.hander); 
} 
render () { 
return( 
<View> 
<Button title="remove" onPress={ ()=>{ 
BackAndroid.removeEventListener ("hardwareBackPress", 
this.hander); 


}}/> 
<Button title="EXIT" onPress={ ()=>{ 
BackAndroid.exitApp (); 
1 
</View> 
Ne 
下 
hander (){ 
console.log ("goBack"); 
return true; 
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运行 工程 ， 打 开 调试 模式 ， 根 据 打 印信 息 可 以 看 到 对 用 户 单 击 设备 返回 按钮 的 监听 效果 。 


8.9 ”监听 程序 运行 状态 


一 款 应 用 程序 在 运行 时 总 会 有 许多 种 状态 ， 例 如 在 用 户 使 用 时 应 用 程序 通常 处 于 前 台 运 行 状 
， 当 用 户 回 到 桌面 或 者 启动 其 他 应 用 程序 时 ， 这 款 应 用 程序 就 处 于 后 台 挂 起 状态 (当然 ,在 前 台 
ied edie 个 瞬时 的 中 间 状 态 ) 。 当 设备 内 存 不 足 时 ,应 用 程序 也 会 发 出 内 
存 不 足 的 状态 提醒 。 

在 React Native 中 ， 你 可 以 使 用 AppState 类 来 监听 应 用 程序 的 前 后 台 状 态 切换 ， 也 可 以 监听 
内 存 不 足 时 系统 发 出 的 警告 。 在 HelloWorld 工程 的 Demo 文件 夹 下 新 建 一 个 命名 为 AppStateDemo.js 
的 文件 ， 在 其 中 编写 如 下 测试 代码 : 

import React, {Component} from "react'7 

import {AppState,View,Button} from 'react-native'; 

export default class AppStateDemo extends Component{ 




















constructor (props){ 
super (props); 
AppState.addEventListener ("change" ,this.handler1) 7 


} 


render (){ 
return( 
<View> 
<Button title="addHandler2" onPress={()=>{ 
AppState.addEventListener ("change",this.handler2); 
}}1/> 
<Button title="removeHandler2" onPress={()=>{ 
AppState.removeEventListener ("change",this.handler2); 
}} /> 
</View> 


) 

} 

handler1(){ 
console.log("handlerl",AppState.currentState); 
return false; 

} 

handler2(){ 
console.log("handler2",AppState.currentState); 


return true; 
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AppState 类 的 addEventListener 方法 用 来 添加 一 个 程序 状态 的 监听 ， 这 个 方法 中 第 1 个 参数 设 
置 监听 的 内 容 ， 可 设置 的 字符 串 为 “change” 或 “memoryWarning”， 设 置 为 “change” 表 示 监 听 
程序 的 前 后 台 状 态 ， 设 置 为 “memoryWarning” 表 示 监 听 内 存 警 告 通知 。AppState 类 的 静态 属性 
currentState 用 来 获取 当前 程序 的 前 后 台 状 态 ， 其 中 可 能 值 列举 如 表 8-15 所 示 。 


表 8-15 currentState 属性 值 

















属性 值 说 明 
active 应 用 正在 前 台 运行 
background 应 用 正在 后 台 运行 
inactive 前 台 切 换 到 后 台 时 的 过 渡 状态 


需要 注意 ， 你 可 以 添加 多 个 监听 回调 ， 当 应 用 程序 状态 改变 时 ， 系 统 会 按照 添加 顺序 依次 执 
行 回调 函数 。 同 样 ， 使 用 removeEventListener 方法 可 以 移 除 一 个 已 经 添加 的 监听 回调 。 


8.10 ” 跨 平 台 的 分 享 功能 











玉 


关于 社会 化 分 享 , 在 学 习 ActionSheetIOS 时 你 已 经 有 所 了 解 ，ActionSheetIOS 可 以 创建 分 享 模 
式 的 活动 列表 , 但 是 只 能 应 用 于 iOS 平台 ， 本 节 将 介绍 在 React Native 中 专门 用 于 分 享 功能 的 跨 平 
台 组 件 Share。 
在 需要 用 户 进行 分 享 操作 时 ， 你 可 以 直接 调用 Share 类 的 share 静态 方法 ， 这 个 方法 在 iOS 平 
台 会 弹出 一 个 分 享 活动 列表 , 在 Android 平台 会 弹出 一 个 分 享 对 话 框 ， 这 个 方法 中 需要 传 入 两 个 参 
数 ， 都 是 对 象 类 型 ， 对 象 可 配置 的 属性 如 表 8-16 所 示 。 
表 8-16 ”share 静态 方法 传 入 参数 





参数 属性 


{ 

message: 分 享 的 内 容 

第 1 个 参数 title: 分 享 的 标题 

url: 分 享 的 链接 ， 仅 iOS 平台 可 用 

} 

{ 

excludedActivityTypes: 数组 ， 设 置 不 包含 的 默认 分 享 平台 ， 仅 iOS 平台 有 效 ， 可 参见 
ActionSheetIOS 一 节 

tintColor: 仅 iOS 平台 有 效 

dialogTitle: 对 话 框 标题 ， 仅 Android 平台 有 效 
} 





第 2 个 参数 
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调用 share 方法 后 会 返回 一 个 Promiss 承诺 对 象 ， 对 于 iOS 平台 ，Promiss 对 象 的 then 链 中 会 
传 入 一 个 包含 action 属性 和 actionType 属性 的 对 象 ， 通 知 开发 者 用 户 分 享 的 行为 。action 属性 对 应 
的 值 定义 在 Share 类 中 ， 可 以 使 用 表 8-17 中 的 Get 方法 来 获取 。 


表 8-17 ”获取 action 属 性 值 的 Get 方 法 








Get 方 法 说 明 





用 户 进行 了 分 享 行为 


shareAction() 





dismissedAction() 用 户 取消 了 分 享 行为 





需要 注意 ， 在 Android 平台 上 ， 无 论 用 户 是 进行 了 分 享 还 是 取消 了 分 享 ，Pormiss 中 都 会 传 入 
shareAction 行为 ， 也 就 是 说 , 在 Android 平台 上 ，Share 组 件 并 不 能 区 分 出 用 户 是 否 确 实 进行 了 分 享 。 

在 HelloWorld 工程 的 Demo 文件 夹 下 新 建 一 个 命名 为 ShareDemo.js 的 文件 ， 在 其 中 编写 如 下 
代码 : 


import React, {Component} from 'react'; 
import {View,Share,Button} from 'react-native'; 
export default class ShareDemo extends Component{ 
render (){ 
returnl( 
<View> 
<Button title="share" onPress={ ()=>{ 
Share.share({ 
message:" 分 享 的 内 容 "， 
title:"title", 
url:"https://www.baidu.com" 
},{ 
tintColor:'red', 
dialogTitle:'dialogTitle' 
}) .then( (action)=>{ 
console.log("success",action); 
}, (action)=>{ 
console.log ("error",action); 
}) 7 
1y> 
</View> 
Wa 


} 


修改 index.iosjs 文件 与 index.android.js 文件 后 , 运行 工程 , 在 两 个 平台 上 的 效果 分 别 如 图 8-23 
与 图 8-24 所 示 。 
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Addta om 
Cancel 


8-23 ”iOS 平台 的 分 享 功能 图 8-24 Android 平台 的 分 享 功能 


8.11 监听 键盘 事件 





React Native 中 的 许多 组 件 都 有 弹出 虚拟 键盘 的 功能 ， 例 如 TextInput。 在 实际 开发 中 ， 很 多 时 
候 你 需要 监听 键盘 的 行为 来 做 业务 逻辑 。 React Native 中 提供 了 Keyboard 对 象 用 来 添加 键盘 行为 的 
监听 。 

Keyboard 对 象 中 定义 了 4 个 方法 ， 如 表 8-18 所 示 。 


表 8-18 Keyboard 对 象 中 的 4 个 方法 








方法 名 解释 参数 
需要 传 入 两 个 参数 : (nativeEvent,func) 
addListener 添加 一 个 键盘 行为 的 监听 | 通用 。 nativeEvent: 字符 串 ， 要 监听 的 键盘 行为 
。 func: 函数 回调 方法 
移 除 某 个 键盘 行为 的 所 有 


需要 传 入 nativeEvent 参数 


removeAllListeners 


监听 方法 





需要 传 入 两 个 参数 : (nativeEvent,func) 
， nativeEvent: 字符 串 ， 键 盘 行为 

” func: 移 除 的 函数 回调 方法 

无 


TemoveListener 移 除 某 个 监听 回调 





dismiss 直接 收 起 键盘 





表 8-18 中 的 nativeEvent 是 React Native 中 定义 的 一 组 字符 串 用 来 表示 键盘 的 行为 ， 如 表 8-19 
所 示 。 
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表 8-19 React Native 中 定义 的 字符 串 对 应 的 键盘 行为 


























名 称 解释 平台 
keyboardWillShow 键盘 将 要 展现 iOS 
keyboardDidShow 键盘 已 经 展现 通用 
keyboardWillHide 键盘 将 要 隐藏 iOS 
keyboardDidHide 键盘 已 经 隐藏 通用 
keyboardWillChangeFrame 键盘 将 要 改变 位 置 iOS 
keyboardDidChangeFrame 键盘 已 经 改变 位 置 iOS 


关于 两 个 键盘 改变 位 置 的 行为 ， 回 调 函 数 中 会 将 键盘 的 起 始 与 结束 位 置 封装 为 对 象 传 入 。 
在 HelloWorld 工程 的 Demo 文件 夹 下 新 建 一 个 命名 为 KeyboardDemojjs 的 文件 ， 在 其 中 编写 
如 下 代码 : 


import React, { Component } from 'react'; 





import { Keyboard, TextInput,Button,View } from 'react-native'; 
export default class KeyboardDemo extends Component{ 
constructor (props){ 
super (props); 
Keyboard.addListener('keyboardWillShow', ()=>{ 
console.log('keyboardWillShowl1'); 
}) 7 
Keyboard.addListener('keyboardWillShow', ()=>{ 
console.log('keyboardWillShow2'); 
Fn 
Keyboard.addListener ('keyboardDidShow', ()=>{ 
console.1log('keyboardDidShow'); 
3 
Keyboard.addListener('keyboardWillHide', ()=>{ 
console.1log('keyboardwillHide'); 
1); 
Keyboard.addListener ('keyboardDidHide'，()=>{ 
console.1log('keyboardDidHide'); 
1); 
Keyboard.addListener('keyboardWillChangeFrame', (keyboard)=>{ 
console.log('keyboardWillChangeFrame', keyboard); 
1); 
Keyboard.addListener ('keyboardDidChangeFrame', ()=>{ 
console.log('keyboardDidChangeFrame'); 
3 
' 
render () { 


return( 
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<TextInput style={{height:30,borderColor:'red', 
borderWidth:1,top:30}} onSubmitEditing={ ()=>{ 
Keyboard.dismiss(); 
}}/> 


} 


修改 index.iosjs 与 index.android.js 文件 后 ， 运 行 调试 模式 即 可 看 到 打印 效果 。 需 要 注意 ， 对 
于 同一 种 键盘 行为 ， 你 可 以 添加 多 个 监听 回调 ， 系 统 会 按照 添加 顺序 依次 执行 回调 方法 。 


8.12 ”React Native 网 络 技术 


互联 网 技术 越 来 越发 达 ， 移 动 应 用 越 来 越 离 不 开 网 络 。 网 络 技术 已 经 成 为 应 用 程序 至 关 重 要 
的 一 部 分 ,资讯 类 应 用 需要 通过 网 络 来 获取 资讯 信息 、 社 交 类 应 用 需要 通过 网 络 来 传递 消息 、 电 商 
类 应 用 则 需要 通过 网 络 实现 购物 结算 ,就 连 单机 游戏 有 时 也 需要 通过 网 络 来 进行 得 分 分 享 、 道 具 购 
买 等 。React Native 中 提供 了 访问 网 络 的 方法 和 接口 ， 其 中 最 重要 的 访问 网 络 方式 有 两 种 : fetch 请 
求 与 XMLHttpRequest(AJAX) 技 术 。 


8.12.1 使 用 fetch 方法 进行 网 络 请 求 


fetch 函数 是 React Native 中 提供 的 访问 网 络 的 方法 ， 其 用 法 和 Web API 中 的 fetch 函数 一 致 。 
其 使 用 方法 十 分 简单 ， 在 调用 fetch 函数 时 ， 你 需要 传递 两 个 参数 ， 其 中 第 1 个 参数 为 请 求 地 址 ， 
第 2 个 参数 为 配置 对 象 ， 对 象 中 常用 的 可 配置 的 属性 意义 如 表 8-20 所 示 。 


表 8-20 ”fetch 函数 参数 的 配置 对 象 























属性 名 意义 值 类 型 或 可 选 值 
method 设置 请 求 方法 字符 串 ， 例 如 GET、POST 
headers 设置 请 求 头 信息 自 定 义 对 象 
mode 设置 请 求 模式 字符 串 ， 如 cors、no-cors 
cache 请 求 的 缓存 模式 字符 串 ， 如 default 
body 设置 请 求 参数 对 象 ， 如 果 为 POST 方式 的 请 求 ， 这 个 参数 必 填 | 自 定义 对 象 


fetch 函数 会 返回 一 个 Promiss 承诺 对 象 ， 在 完成 的 回调 中 会 将 请 求 的 返回 数据 传 入 。 在 
HelloWorld 工程 的 Demo 文件 夹 下 新 建 一 个 命名 为 NetDemojs 的 文件 ， 在 其 中 编写 如 下 代码 : 


import React, { Component } from "react'"7 











import { 
Button, 
View 
} from 'react-native'; 
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export default class NetDemo extends Component{ 
render (){ 
return( 
<View> 
<Button title="Fetch" onPress={f ()=>{ 


fetch("https://facebook.github.io/react-native/movies.json",{ 
method: "GET", 
headers:{ 
name:"PK" 
} 

}) .then ( (response)=>1{ 
console.log (response); 
return response.json(); 

}) .then ( (json)=>{ 
console.1log(json); 

}); 

Eh/ 
</View> 
); 


} 


修改 index.iosjs 与 index.android.js 文件 后 ， 运 行 工 程 ， 打 开 调 试 模 式 可 以 看 到 打印 出 的 请 求 
返回 数据 。 上 面 示例 代码 中 请 求 数 据 的 地 址 为 Facbook 提供 的 示例 接口 将 会 返回 一 个 影 单列 表 。 
关于 请 求 返 回 数据 ， 还 需要 做 深入 的 了 解 ， 上 面 代码 中 的 response 实际 上 是 Response 对 象 ， 


这 个 对 象 中 有 许多 属性 用 来 存储 数据 信息 和 方法 ， 对 数据 进行 整理 ， 如 表 8-21 所 示 。 
表 8-21 常用 属性 列表 























属性 名 释义 
type 返回 数据 类 型 ， 只 读 的 
url 请 求 的 地 址 ， 只 读 的 
status 请 求 的 状态 ， 只 读 的 
ok 请 求 是 否 成 功 ， 只 读 的 布尔 值 
headers 返回 头 信息 ， 只 读 的 对 象 
bodyUsed 布尔 值 ， 标 记 数 据 信息 是 否 被 读 取 过 


常用 方法 如 表 8-22 所 示 。 
表 8-22 常用 方法 
方法 名 意义 


参数 





clone 克隆 返回 数据 对 象 无 











error 返回 一 个 绑 定 了 异常 的 Response 对 象 无 
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( 续 表 ) 
方法 名 意义 参数 
arrayBuffer | 读 取 返 回 数据 ， 并 将 其 置 为 已 读 ， 返 回 以 数组 为 回调 参数 的 Promisse 对 象 天 
blob 读 取 返 回 数据 ， 并 将 其 置 为 已 读 ， 返 回 以 Blob 数据 为 回调 参数 的 Promiss 对 象 | 无 
json 同上 ， 数 据 会 被 作为 JSOM 数据 解析 成 对 象 过 
text 同上 ， 数 据 会 被 解析 为 字符 串 于 














需要 注意 , fetch 方法 可 能 会 抛 出 异常 , 你 可 以 使 用 Promiss 对 象 调用 catch 方法 来 进行 捕获 。 


8.12.2 ”使 用 XMLHttpRequest 进行 网 络 请 求 


XMLHttpRequest 是 Web 开发 中 常用 的 网 络 API, 其 为 网 页 提供 了 客户 端 与 服务 端的 通信 功能 。 
XMLHttpRequest 是 AJAX 技术 的 一 种 实现 〈AJAX 即 非 同步 的 JavaScript 及 XML 技术 ) 。 

在 8.12.1 小 节 新 建 的 NetDemojjs 文件 中 添加 一 个 新 的 按钮 ， 实 现 如 下 : 

<Button title="ajax" onPress={ ()=>{ 


Var request = new XMLHttPRequest () 
request .responseTyPe="json"7 


request .onreadystatechange = () => { 
if (request.readyState!==4) { 
return; 
} 
if (request.status === 200) { 
console.log('success', request.response); 
} else { 


console.warn('error'); 


}; 
request .open('GET' 
"https://facebook.github.io/react-native/movies.json"); 
request.send(); 
}} /> 





上 面 的 示例 代码 创建 了 一 个 XMLHttpRequest 对 象 ， responseType 属性 设置 返回 数据 的 类 型 ， 这 
里 的 示例 请 求 服务 端 返回 了 JSON 数据 ， 所 以 这 里 也 设置 为 “json”。onreadystatechange 属性 用 来 设 
置 当 请 求 状态 改变 时 的 回调 ，readyState 属性 为 请 求 的 状态 ， 当 其 为 4 时 表示 请 求 数据 获取 完成 。 
XMLHttpRequest 对 象 常用 属性 如 表 8-23 所 示 。 
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表 8-23 XMLHttpRequest 对 象 常用 属性 























属性 名 意义 
onreadystatechange | 设置 当 请 求 状态 改变 时 的 回调 | 函数 
0: 未 打开 ，open 方法 还 未 调用 
。 1: 已 经 打开 ， 未 发 送 ，send 方法 还 未 调用 
readyState 请 求 状态 码 。 2: 已 经 获取 响应 头 信息 
。， 3: 正在 下 载 数据 中 
。 4: 请 求 完成 
Tesponse 请 求 返回 的 数据 会 根据 responseType 指定 的 数据 类 型 进行 解析 
请 求 返回 的 数据 为 文本 时 ， 这 
TesponseText 个 属性 存放 文本 字符 串 
。 "": 表示 字符 串 〈 默 认 ) 
» "arraybuffer": 
responseType 设置 请 求 返 回 数据 的 类 型 。 "blob": Blob 数据 
。， "json": JSON 数据 
。 "text": 字符 串 
status 请 求 的 响应 状态 码 只 读 ， 例 如 200 表示 成 功 
statusText 请 求 的 响应 状态 文本 字符 串 








XMLHttpRequest 对 象 常用 方法 如 表 8-24 所 示 。 


方法 名 


表 8-24 XMLHttpRequest 对 象 常用 方法 





意义 





abort 


中 断 正在 进行 的 请 求 | 无 





getAllResponseHeaders 


获取 所 有 响应 头 数据 | 无 





getResponseHeader 


获取 指定 响应 头 数据 | 字符 串 





open 


打开 一 个 请 求 


0 async,user,password): 
method: 设置 请 求 方法 ， 如 GET 

。 url: 设置 请 求 地 址 

。 async: 可 选 参数 ， 设 置 是 否 为 异步 请 求 ， 设 置 为 true 则 
为 异步 请 求 ， 设 置 为 false 则 为 同步 请 求 ， 默 认为 true 

， user: 可 选 参数 ， 用 户 名 

。 password: 可 选 参数 ， 密 码 





Send 


无 





setRequestHeader 





参数 (key,value) 如 下 : 


*。 value: 对 应 的 值 





。 key: 请 求 头 中 的 键 
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8.13 ”进行 用 户 位 置 获 取 


React Native 中 封装 了 定位 用 户 位 置信 息 的 服务 , 使 用 Geolocation 对 象 可 以 方便 地 监听 用 户 位 
置 。 需要 注意 , iOS 平台 需要 在 工程 的 Info.plist 文件 中 添加 NSLocationWhenInUseUsageDescription 
字段 来 允许 定位 服务 (使 用 react-native init 命令 创建 的 工程 自动 已 经 添加 ) ，Android 平台 需要 在 
工程 的 AndroidManifestxml 文件 中 添加 如 下 标签 获取 权限 : 


<uses-permission android:name="android.permission.ACCESS FINE LOCATION" /> 


在 HelloWorld 工程 的 Demo 文件 夹 下 新 建 一 个 命名 为 GeolocationDemo.js 的 文件 ， 在 其 中 编 
写 如 下 代码 : 


import React, { Component } from 'react'; 
import { 
Button, 
View 
} from 'react-native'; 
Var Geolocation = require('Geolocation'); 
export default class GeolocationDemo extends Component{ 
render(){ 
return( 
<View> 
<Button title="GEO" onPress={ ()=>{ 
Geolocation.getCurrentPosition( (obj)=>{ 
console.log (obj); 
Tre 
console.log ("error"); 
},{ 


timeout:10000, 
maximunAge:100000, 
enableHighAccuracy:false, 
distanceFiter:10 
A 
</View> 


) 


getCurrentPosition 方法 用 来 获取 用 户 位 置 ， 其 参数 意义 如 表 8-25 所 示 。 
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表 8-25 getCurrentPosition 参 数 

参数 意义 

数 1 设置 定位 成 功 的 回调 ， 回 调 中 会 传 入 定位 信息 对 象 ， 其 中 包含 经 纬度 、 速 度 、 海 拔 等 各 种 信息 ， 
国 可 以 在 调试 模式 中 打印 观察 
参数 2 定位 失败 的 回调 
配置 参数 ， 对 象 中 可 设置 的 属性 如 下 : 

， timeout: 设置 定位 超时 时 间 ， 单 位 毫秒 
参数 3 。 maximumAge: 设置 定位 信息 有 效 期 ， 单 位 毫秒 


。 enableHighAccuracy: 设置 是 否 开启 精准 定位 
。 distanceFiter: 设置 位 置 容 差 ， 单 位 米 














除了 getCurrentPosition 方法 ，Geolocation 对 象 中 还 提供 了 一 个 watchPosition 方法 ， 这 个 方法 
的 参数 也 是 3 个 , 意义 和 getCurrentPosition 方法 完全 一 致 ,不同 的 是 ，watchPosition 方法 实现 了 对 
用 户 位 置 的 实时 监听 ， 当 用 户 位 置 发 生 改 变 时 ， 这 个 方法 设置 的 回调 函数 都 会 被 调用 ， 同 时 
watchPosition 方法 会 返回 一 个 数值 作为 ID, 可 以 通过 调用 clearWatch 方法 传 入 ID 作为 参数 来 清除 
监听 。 你 也 可 以 在 定位 过 程 中 随时 调用 stopObserving 方法 来 停止 定位 信息 的 获取 。 





对 于 iOS 模拟 器 , 可 以 通过 Debug 工具 来 模拟 位 置信 息 , 选择 iOS 模拟 器 工具 栏 上 的 Debug 


选项 ， 选 择 其 中 的 Location 选项 ， 可 以 指定 其 中 某 个 地 点 作为 模拟 器 的 位 置 ， 也 可 以 自 定 
义 经 纬度 来 模拟 位 置 (设置 后 需要 重启 模拟 器 生效 )。 





8.14 数据 持久 化 技术 


数据 持久 化 技术 在 一 款 应 用 程序 的 开发 中 十 分 重要 。 前 面 所 学 习 的 章节 中 ， 无 论 是 通过 代码 
在 内 存 中 创建 出 的 数据 还 是 通过 网 络 从 服务 端 下 载 的 数据 , 当 用 户 退 出 应 用 程序 后 , 这 些 数据 都 会 
被 清空 。 然 而 有 时 候 ， 某 些 数 据 需 要 持久 化 地 保存 在 用 户 的 手机 上 ， 例 如 用 户 的 登录 信息 数据 、 网 
络 缓存 数据 等 。 在 React Native 中 ， 进 行 数据 持久 化 十 分 容易 ，React Native 中 提供 了 key-value 模 
式 的 异步 存储 对 象 AsyncStorage。 

AsyncStorage 对 象 是 key-value 模式 的 异步 存储 工具 。 所谓 key-value 模式 ， 是 指 在 进行 数据 存 
储 时 采用 的 是 键 值 对 的 模式 ， 一 个 键 对 应 一 个 具体 的 数据 值 ， 键 不 可 重复 ; 所 谓 异 步 ， 是 指 在 进行 
数据 写 入 或 读 取 时 ， 程 序 流程 不 受 影响 。AsyncStorage 对 象 中 提供 了 丰富 的 方法 ， 如 表 8-26 所 示 。 
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表 8-26 AsyncStorage 对 象 的 方法 


方法 名 解释 参数 


(key,value,callback(error)) 

。 key: 键 

。 value: 值 

。 callback: 存储 完成 的 回调 ， 如 果 存 储 失败 ， 
会 将 错误 信息 作为 参数 传 入 

(key,callback(error,result)) 

。 key: 键 

。 callback: 查询 结果 回调 , 会 将 查询 到 的 数据 
result 作为 参数 传 入 

(key,callback(error)) 

。 key: 键 

， callback: 删除 完成 的 回调 


(key,value,callback(error)) 





setltem 进行 数据 存储 





getltem 获取 某 个 键 对 应 的 值 





removeltem ”| 删除 某 个 键 对 应 的 值 


将 某 个 键 对 应 的 值 进行 json 合并 ， 。 key: 键 
mergeltem ”| 需要 注意 ， 已 经 存在 的 值 和 要 合并 i 
的 值 都 必须 为 严格 的 json 字符 吕 


。 callback: 合并 完成 后 的 回调 

(callback(error,keys)) 

”callback: 回调 , 会 将 所 有 查询 到 的 键 作为 参 
数 传 入 

(kvs,callback(error)) 

。 kvs: 键 值 对 ， 采 用 数组 格式 ， 例 如 [[k1,v1]， 
[kK2,v2],...] 

。_callback: 完成 后 的 回调 

(keys,callback(errorresults)) 

。 keys: 要 查询 的 键 组 成 的 数组 

。 callback: 结果 回调 , 会 将 结果 作为 参数 传 入 

(keys,callback) 

， keys: 要 删除 的 键 组 成 的 数组 

。 callback: 完成 的 回调 

(callback) 

， callback: 操作 完成 的 回调 


getAlIKeys ”| 获取 所 有 已 经 存储 的 键 


multiSet 同时 设置 多 个 键 值 








multiGet 同时 获取 多 个 键 对 应 的 值 








multiRemove | 同时 删除 多 个 键 对 应 的 值 





clear 清空 所 有 键 值 








在 HelloWorld 项 目的 Demo 文件 夹 下 新 建 一 个 命名 为 AsyncStorageDemojjs 的 文件 , 在 其 中 编 
写 如 下 测试 代码 : 
import React, { Component } from 'react'; 
import { 
Button, 
View, 
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AsyncStorage 


} from '‘'react-native'; 


export default class AsyncStorageDemo extends Component{ 


render (){ 


(error)=>{ 


(error)=>{ 


<View> 


<Button title="Save" onPress={()=>{ 
AsyncStorage.setItem("name", "Jaki", (error)=>{ 
console.log (error); 
Ds; 
}1}/> 
<Button title="Get" onPress={()=>{ 
AsyncStorage.getItem("name", (error,result)=>{ 
console.log (error, result); 
}) 7 
}1}1/> 
<Button title="Remove" onPress={()=>{ 
AsyncStorage.removeItem("name", (error)=>{ 
console.log (error); 
Nh 
}11/> 
<Button title="AddMerge" onPress={()=>{ 
AsyncStorage.setItem("merge","{\"name\":\"jaki\"}", 


console.log (error); 
}); 
}3/> 
<Button title="Merge" onPress={()=>{ 
AsyncStorage.mergeIltem("merge","{\"age\":24}", 


console.log (error); 
]) 
Hh/> 
<Button title="GetMerge" onPress={()=>{ 
AsyncStorage.getItem("merge", (error,result)=>{ 
console.log (error,result); 
Ds; 
> 
<Button title="GetAllKey" onPress={()=>{ 
AsyncStorage.getAllKeys ( (error, keys)=>{ 
console.log (error, keys); 
入 
}}/> 
<Button title="mutliSet" onPress={()=>{ 
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AsyncStorage.multiSet([["one","1"],["two","2"]], 
(error)=>{ 
console.log (error); 
Ds; 
}} /> 
<Button title="multiGet" onPress={ ()=>{ 
AsyncStorage.multiGet (["one", "two"], (error,results)=>{ 
console.log (error,results); 
1); 


}} /> 
<Button title="multiRemove" onPress={ ()=>{ 


AsyncStorage.multiRemove(["one", "two"], (error, 


results)=>{ 
console.log (error,results); 


}); 

HE 

<Button title="clear" onPress={()=>{ 
AsyncStorage.clear ( (error)=>{ 

console.1log (error); 

}); 

}}/> 

</View> 
); 


} 
上 面 的 代码 演示 了 AsyncStorage 对 象 的 所 有 常用 方法 ， 修 改 index.iosjs 与 index.android,js 后 
可 以 在 调试 模式 下 观察 效果 。 


8.15 “剪贴 板 工 具 的 应 用 


剪贴 板 是 移动 应 用 中 常用 的 复制 粘贴 数据 的 工具 ，React Native 提供 了 Clipboard 对 象 ， 通 过 
代码 来 控制 复制 粘贴 行为 。 


大 部 分 文本 输入 控件 都 可 以 自动 响应 复制 粘贴 行为 ， 当 用 户 在 TextInput 上 长 按时 会 弹出 一 
个 菜单 ， 其 中 包括 文本 选择 、 剪 切 、 复 制 、 粘 贴 等 功能 。 





在 HelloWorld 工程 的 Demo 文件 夹 下 新 建 一 个 命名 为 ClipboardDemojjs 的 文件 ， 在 其 中 编写 
如 下 测试 代码 : 
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import React, { Component } from 'react'; 
import { 
TextInput, 
View, 
Text, 
Clipboard, 
Button 
} from 'react-native'; 
export default class ClipboardDemo extends Component{ 
render (){ 
return( 
<View style={{marginTop:20}}> 
<TextInput 
style={ {borderWidth:1,borderColor:'gray',height:30}}/> 
<Text onPress={ ()=>1{ 
Clipboard.setString(" 复 制 文字 ") ; 
} } > 复制 文字 </Text> 
<Button title=" 打 印 文字 " onPress={ ()=>{ 
Clipboard.getString() .then((str)=>{ 
console.log(str); 
By 
1}1/> 
</View> 
1 


1 
Clipboard 中 只 提供 了 两 个 方法 ，setString 方法 用 来 将 字符 串 写 入 剪贴 板 中 ，getString 方法 用 
来 将 剪贴 板 中 的 数据 读 取 出 来 。 注 意 ，getString 方法 会 返回 一 个 Promise 对 象 。 


8.16 ”获取 设备 网 络 状态 





在 实际 开发 中 ， 我 们 常常 需要 使 用 到 网 络 技术 ， 有 时 还 需要 获取 用 户 所 处 的 网 络 环境 ， 例 如 ， 
在 非 WiFi 环境 下 ， 为 了 节省 用 户 流量 ， 一 些 视频 数据 往往 不 会 自动 下 载 播放 。 在 React Native 中 ， 
NetInfo 对 象 提供 了 异步 获取 用 户 网 络 环境 的 方法 。 

在 HelloWorld 工程 的 Demo 文件 夹 下 新 建 一 个 命名 为 NetInfoDemo.js 的 文件 ， 在 其 中 编写 如 
下 测试 代码 : 

import React, { Component } from 'react'; 

import { 

Button, 
View, 
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NetInfo 
} from 'react-native'; 
export default class NetInfoDemo extends Component{ 
render (){ 
return( 
<View> 
<Button title="NetInfo" onPress={()=>{ 
NetInfo.fetch() .then( (info)=>{ 
console.log (info); 
Ds; 
Po 
</View> 


若 要 在 Android 平台 获取 用 户 网 络 环境 信息 ， 需 


代码 来 获取 权限 : 
<uses-permission android:name="android.permission. 
ACCESS_ NETWORK STATE" /> 





NetInfo 对 象 中 的 fetch 方法 用 异步 的 方式 获取 用 户 所 处 的 网 络 环境 ， 这 个 方法 会 返回 一 个 
Promise 对 象 , 在 其 完成 的 回调 中 会 将 用 户 的 网 络 状态 作为 参数 传 入 。 注意 , 在 iOS 平台 和 Android 
平台 所 定义 的 网 络 环境 并 不 一 致 。 

(1) ioOS 平台 
none: 设备 处 于 离线 状态 。 
wifi: 设备 处 理 wifi 联网 状态 。 
cell: 设备 通过 移动 网 络 连接 。 
unknown: 未 知 状 态 。 


@ 0 0 9。 


(2) Android 平台 


NONE: 设备 处 于 离线 状态 。 

BLUETOOTH: 蓝牙 数据 连接 。 

DUMMY: 模拟 数据 连接 。 

MOBILE: 移动 网 络 数 据 连接 。 

MOBILE_DUN: 拨号 网 络 连接 。 

MOBILE_HIPRI: 高 优先 级 移动 网 络 连接 。 

MOBILE MMS: 彩信 移动 网 络 连接 。 

MOBILE SUPL: 安全 用 户 面 定位 (SUPL ) 数据 连接 。 
VPN: 虚拟 网 络 连 接 。 
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e@ WIFI wifi 连接 。 
@ WIMAX: wimax 连接 。 
ee ” UNKNOWN: 位 置 状态 。 


你 也 可 以 使 用 NetInfo 对 象 的 addEventListener 方法 来 添加 用 户 网 络 环境 变化 的 监听 ， 这 个 方 
法 需要 两 个 参数 ， 第 1 个 参数 为 监听 的 行为 ， 目 前 只 能 填写 字符 串 “change”， 第 2 个 参数 为 回调 
函数 ， 当 用 户 网 络 环境 改变 时 ， 这 个 回调 函数 会 被 调用 ， 并 将 当前 的 网 络 环境 作为 参数 传 入 。 与 
addEventListener 方法 对 应 ，removeEventListener 方法 用 来 移 除 监听 。 

对 于 Android 平台 ，NetInfo 中 还 提供 了 一 个 更 方便 的 方法 获取 用 户 所 在 的 网 络 连接 是 否 计 费 
(大 多 数 时 候 这 个 方法 更 常用 ) : isConnectionExpensive。 这 个 方法 需要 传 入 一 个 函数 作为 回调 ， 
函数 的 参数 为 布尔 值 ， 表 示 用 户 当前 的 网 络 环境 是 否 计 费 。 

还 有 一 点 需要 注意 ,无 论 是 在 iOS 平台 还 是 Android 平 台 ,NetInfo 对 象 中 都 提供 了 isConnencted 
属性 ， 这 个 属性 也 是 一 个 对 象 ， 你 也 可 以 使 用 isConencted 对 象 来 调用 fetch、addEventListener 和 
removeEventListener 方法 。 不 同 的 是 ， 使 用 这 个 对 象 在 调用 上 面 的 方法 时 ， 只 会 将 用 户 当前 是 否 联 
网 的 信息 传 入 ， 在 你 不 关心 具体 的 网 络 环境 类 型 时 这 个 对 象 十 分 好 用 。 

















8.17 React Native 动画 技术 


动画 的 合理 应 用 可 以 大 大 地 增强 应 用 程序 的 用 户 体验 。 在 React Native 中 提供 了 强大 的 动画 泻 
染 框架 Animated。Animated 模块 中 提供 了 大 量 的 动画 对 象 类 与 动画 执行 方法 。 要 想 让 一 个 动画 效 
果 完 整 执行 ， 你 至 少 需要 关注 两 部 分 内 容 : 对 话 对 象 的 创建 与 动画 执行 函数 。 

需要 注意 ， 并 不 是 所 有 的 组 件 默 认 都 支持 动画 ，React Native 中 默认 支持 的 动画 组 件 有 View、 
Text、Image 和 ScrollView， 当 然 你 也 可 以 根据 自己 的 需要 定义 自 定义 的 动画 组 件 ， 后 面 章节 会 更 
加 深入 地 介绍 。 


8.17.1 创建 单 值 驱动 的 动画 


单 值 驱动 是 指 通过 不 断 更 新 动画 组 件 某 个 属性 的 数值 来 实现 动画 效果 ， 例 如 控件 的 宽 高 变化 
动画 、 组 件 的 位 置 变 化 动画 、 组 件 的 透明 度 变化 动画 等 。 单 值 驱动 动画 使 用 AnimatedValue 类 进行 
配置 ，AnmatedValue 是 Animated 框架 中 的 内 部 类 ， 在 使 用 时 ， 使 用 Animated.Value() 的 方式 创建 。 

AnimatedValue 主要 通过 定义 起 始 值 与 结束 值 来 定义 动画 过 程 ， 在 Animated.Value0 构 造 方法 
中 需要 传 入 一 个 数值 ， 作 为 定义 动画 属性 的 起 始 值 。 其 他 重要 方法 如 表 8-27 所 示 。 





表 8-27 AnimatedValue 的 方法 












解释 
重新 定义 动画 起 始 值 ， 执 行 这 个 方法 会 | 、 
setValue 中 断 当前 动画 通用 数值 
et 设置 修正 值 ， 之 后 使 用 setValue 方法 设 
置 的 值 会 被 加 上 这 个 修正 值 




















( 续 表 ) 
方法 名 解释 平台 参数 
ee 添加 一 个 动画 值 变 化 的 监听 , 会 返回 一 通用 函数 , 会 将 当前 动画 执行 过 程 中 属性 值 包 
个 监听 id 字符 串 装 成 对 象 作为 参数 进行 传 入 
removeListener | 根据 id 移 除 一 个 监听 通用 “| 字符 串 
stopAnimation | 立即 结束 动画 通用 rd 
i 立即 结束 动画 ， 并 且 将 动画 属性 值 设置 通用 函数 , 函数 的 参数 为 动画 完全 完成 后 的 最 
”| 为 初始 状态 终 属性 值 











在 HelloWorld 工程 的 Demo 文件 夹 下 新 建 一 个 命名 为 AnimatedDemo.js 的 文件 ， 在 其 中 编写 
如 下 测试 代码 : 


import React, { Component } from 'react'; 
import { 
Button, 
View, 
Animated 
} from 'react-native'; 
export default class AnimatedValueDemo extends Component{ 
constructor (props){ 
super (props); 
this.state = { 
animated:new Animated.Value (1) 
}; 
this.state.animated.addListener( (value)=>{ 
console.log(value); 
3 
} 
render (){ 
return( 
<View> 
<Animated.View style={{marginTop:100,height: 
this.state.animated,backgroundColor: 'red'}}></Animated.View> 
<Button title="Start Animation" onPress={ ()=>{ 
Animated.timing( 
this.state.animated, 
{tovalue:100} 
) .start() 7 
jiY> 
</View> 
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在 上 面 代 码 创建 AnimatedValue 对 象 的 部 分 ， 先 把 这 个 对 象 作 为 AnimatedValueDemo 组 件 的 
状态 进行 保存 ， 之 后 将 其 与 Animated.View 组 件 的 高 度 属性 进行 绑 定 (要 执行 动画 ， 必 须 使 用 支持 
动画 的 组 件 ) 。 初 始 状态 时 ， 动 画 视 图 的 高 度 为 1 个 单位 ， 单 击 按钮 ， 动 画 视图 的 高 度 调整 为 100 
个 单位 ， 接 下 来 再 来 分 析 动画 的 执行 方法 timing 函数 。 


8.17.2 ”使 用 timing 方法 执行 平滑 过 渡 动 画 


timing 函数 是 Animated 框架 中 提供 的 一 个 执行 AnimatedVlaue 或 者 AnimatedValueXY (二 维 
值 驱动 的 动画 ， 后 面 会 介绍 ) 类 型 动画 的 方法 。 这 个 方法 可 以 传 入 两 个 参数 ， 第 一 个 参数 为 要 执行 
的 动画 对 象 ， 第 2 个 参数 为 一 些 动画 选项 配置 对 象 。 我 们 主要 来 看 第 2 个 参数 , 这 个 参数 中 可 配置 
的 属性 如 表 8-28 所 示 。 

表 8-28 timing 函数 参数 中 可 配置 的 属性 

属性 名 解释 
动画 执行 时 是 否 可 进行 用 户 交互 〈 例 如 动画 执行 
时 触发 onPress 方法 ) 
useNativeDriver | 是 否 进 行 原生 驱动 


onComplete 动画 完成 后 执行 的 回调 





isInteraction 





iterations 迭代 次 数 

toValue 动画 属性 目标 值 
duration 动画 执行 时 间 
delay 动画 延 时 执行 实现 





动画 执行 时 间 函 数 ，Easing 模块 中 定义 了 许多 函 
数 ， 你 也 可 以 定义 自己 的 时 间 函 数 


easing 








timing 返回 一 个 动画 组 件 ， 调 用 start 方法 即 可 开始 动画 的 执行 。 修 改 AnimatedValueDemo 组 
件 的 代码 如 下 : 


export default class AnimatedValueDemo extends Component{ 
constructor (Props) { 
super (Props) 
this.state = { 
animated:new Animated.Value(1) 
}; 
this.state.animated.addListener ((value)=>{ 
console.log (value); 
DD); 
} 
render () { 
return( 
<View> 
<Animated.View style={{marginTop:100, 
height:this.state.animated,backgroundColor: 'red'}}></Animated.View> 
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<Button title="Start Animation" onPress={ ()=>{ 


Animated.timing( 
this.state.animated, 
{ 
toValue:100, 
onComplete: (obj)=>{ 
console.1og (obj); 
}, 
duration:2, 
delay:1 
!! 
) .start() 7 
BY> 
</View> 


); 


} 
修改 index 相关 文件 后 ， 运 行 工程 ， 可 以 看 到 动画 更 加 可 控 的 效果 。 
8.17.3 ”深入 理解 easing 


easing 函数 用 来 控制 动画 受 时 间 影 响 的 方式 , 例如 大 部 分 动画 的 执行 是 线性 的 , 即 动画 是 匀速 
平稳 执行 的 ， 还 有 些 动画 的 执行 则 是 先 快 后 慢 , 或 者 先 慢 后 快 ， 再 或 者 开始 结束 慢 、 中 间 快 。 要 配 
置 这 样 的 动画 ， 就 需要 使 用 easing 函数 。 

在 7.17.2 小 节 介 绍 动 画 的 配置 对 象 时 ， 你 知道 可 以 使 用 easing 属性 来 配置 动画 。 这 个 属性 需 
要 设置 为 函数 ， 函 数 中 会 将 动画 当前 执行 的 进度 作为 参数 (0 一 1) 传 入 ， 需 要 开发 者 将 动画 实际 的 
执行 程度 作为 返回 值 返回 ， 举 一 个 简单 的 例子 ， 我 们 前 面 配置 的 动画 是 在 2 秒 内 ，View 组 件 的 高 
度 由 1 个 单位 变化 成 100 个 单位 ， 你 可 以 将 这 个 变化 尺寸 通过 easing 属性 来 变 成 200 个 单位 ， 示 
例 代码 如 下 : 


<View> 








<Animated.View style={{marginTop:100, height: 
this.state.animated,backgroundColor: 'red'}}></Animated.View> 
<Button title="Start Animation" onPress={ ()=>{ 
Animated.timing( 
this.state.animated, 
{ 
toValue:100， 
onComplete: (obj)=>{ 
console.log (obj); 
}, 
duration:2000, 
delay:1000, 
easing: (oriValue)=>{ 
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return 2*oriValue; 
1 
1 
) .start() 
}1}1/> 
</View> 


一 般 情况 下 , 你 都 不 需要 手动 创建 easing 函数 (除非 真 的 需要 ) 。 React Native 中 提供 了 Easing 
模块 ， 这 个 模块 中 提供 了 大 量 的 函数 供 开发 者 直接 使 用 ， 如 表 8-29 所 示 。 


表 8-29 Easing 模块 的 函数 

















函数 名 解释 平台 参数 
step0 符号 函数 ， 当 传 入 值 大 于 0 时 返回 1， 否 则 返回 0 通用 数值 
stepl 符号 函数 ， 当 传 入 值 大 于 1 时 返回 1， 否 则 返回 0 通用 数值 
linear 线性 函数 ， 直 接 将 参数 作为 返回 值 返回 通用 数值 
ease 缓慢 加 速 函 数 通用 数值 
quad 平方 函数 ， 将 参数 求 平方 后 返回 通用 数值 
cubic 立方 函数 ， 将 参数 求 立 方 后 返回 通用 数值 

指数 函数 构造 器 , 此 函数 的 返回 值 不 是 数值 , 而 是 一 个 easing 函数 ， 

此 easing 函数 会 将 poly 函数 的 参数 作为 指数 ， 将 自身 的 参数 作为 

WE ese 

Doly rae 例如 poly(3) 会 返回 一 个 函数 : 通用 数值 


retum Math.pow(t,3); 






































sin sin 函数 通用 数值 
circle 函数 通用 数值 
exp 指数 函数 通用 数值 
elastic 弹性 函数 构造 器 ， 传 入 弹性 系数 ， 会 返回 一 个 easing 函数 通用 数值 
back 后 略 函数 构造 器 ， 返 回 easing 函数 通用 数值 
bounce “| 回 弹 函 数 ， 传 入 弹性 系统 通用 数值 
bezier 贝 塞 尔 函数 构造 器 ， 传 入 4 个 贝 塞 尔 参数 值 ， 返 回 easing 函数 通用 xl,y1,x2,y2) 
in 顺序 easing 函数 ， 传 入 easing 函数 ， 并 且 直 接 返 回 通用 easing 函数 
out 逆序 easing 函数 ， 传 入 easing 函数 ， 逆 序 整理 后 返回 通用 easing 函数 
inOut 传 入 easing 函数 ， 前 半 部 分 顺序 ， 后 半 部 分 逆序 整理 后 返回 通用 easing 函数 

完整 的 回 弹 动画 代码 如 下 : 

import React, { Component } from 'react'; 

import { 

Button, 


View, 
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Animated, 
Easing 
} from 'react-native'; 
export default class AnimatedDemo extends Component{ 
constructor (props){ 
super (props); 
this.state = { 
animated:new Rnimated.Value (1) 
}; 
this.state.animated.addListener ((value)=>{ 
console.log(value); 
1); 
} 
render (){ 
return( 
<View> 
<Animated.View style={{marginTop:100,height:this.state.animated, 
backgroundColor: 'red'}}></Animated.View> 
<Button title="Start Animation" onPress={ ()=>{ 
Animated.timing( 
this.state.animated, 
{ 
toValue:100, 
onComplete: (obj)=>{ 
console.log (obj); 
}, 
duration:2000, 
delay:1000, 
easing:Easing.bounce 
} 
).start(); 
}}/> 
</View> 
); 
} 


8.17.4 ”二 维 动画 对 象 与 衰减 动画 


如 果 你 认真 学 习 了 前 3 小节 的 内 容 , 就 应 该 对 React Native 中 动画 的 构建 有 了 全 局 的 理解 ， 再 
学 习 后 面 的 动画 技术 将 会 轻松 很 多 。 本 小 节 将 介绍 二 维 动画 与 decay 动画 函数 。 

如 果 你 想 将 组 件 的 某 一 个 属性 进行 动画 变换 ， 那 么 使 用 AnimatedValue 是 十 分 有 效 的 。React 
Native 中 还 提供 了 另 一 个 动画 对 象 AnimatedValueXY,， 它 可 以 方便 地 控制 组 件 的 两 个 属性 〈 我 们 姑 
且 将 其 称 为 二 维 动画 ) ， 使 用 Animated.ValueXY 来 进行 对 象 的 创建 ， 原 则 上 讲 ， 也 可 以 通过 创建 
两 个 AnimatedValue 来 实现 二 维 动画 。timing 方法 可 以 方便 地 控制 动画 执行 的 方式 ，Easing 函数 的 
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使 用 更 是 增强 的 动画 地 表现 形式 ，decay 方法 也 是 用 来 执行 动画 的 函数 ， 只 是 它 没有 timing 方法 灵 
活 ， 用 来 执行 随时 间 进 行 衰减 的 动画 (减速 效果 的 动画 )。 
在 AnimatedDemo.js 文件 中 创建 一 个 新 类 ， 代 码 如 下 : 


export class AnimatedValue2DDemo extends Component{ 
constructor (props){ 
super (props); 
this.state = { 
animated:new Animated.ValueXY ({x:10,y:10}) 
i 
this.state.animated.addListener( (value)=>{ 
console.log(value); 
FR 
} 
render(){ 
return( 
<View> 
<Animated.View style={ {marginTop:100,height:this.state.animated.x, 
width:this.state.animated.y,backgroundColor: 'red'}}></Animated.View> 
<Button title="Start Animation" onPress={()=>{ 
Animated.decay( 
this.state.animated, 
{ 
velocity: {x:0.3,y:0.3}, 
deceleration:0.997 
} 
)-start()s 
jv 
</View> 
); 


} 
修改 index.iosjs 与 index.android.js 文件 如 下 : 


import AnimatedDemo, {AnimatedValue2DDemo} from './Demo/AnimatedDemo'; 
export default class RN extends Component { 
render() { 
return ( 
<AnimatedValue2DDemo /> 
) 7 
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运行 工程 ， 可 以 明显 地 看 到 在 组 件 尺寸 增 大 的 过 程 中 ， 增 大 的 速度 不 断 衰减 。 注 意 ，decay 方 
法 的 第 2 个 参数 用 来 进行 动画 配置 , 其 中 velocity 属性 用 来 配置 动画 执行 的 初速 度 ，deceleration 属 
性 用 来 设置 衰减 速率 。 


8.17.5 弹簧 动画 





decay 方法 所 执行 的 动画 是 持续 衰减 的 减速 动画 ，Animated 框架 中 还 提供 了 一 个 spring 方法 ， 
专门 用 来 执行 弹簧 动画 。 
在 AnimatedDemo.js 文件 中 新 建 一 个 类 ， 代 码 如 下 : 


export class SpringAnimatedDemo extends Component{ 
constructor (props){ 
super (props); 
this.state = { 
animated:new Animated.ValueXY ({x:10,y:10}) 
jy 
} 
render (){ 
return( 
<View> 
<Animated.View style={ {marginTop:100, height:this.state.animated.x, 
width:this.state.animated.y,backgroundColor: 'red'}}></Animated.View> 
<Button title="Start Animation" onPress={ ()=>{ 
Animated.spring (this.state.animated, { 
toValue: {x:100,y:100}, 
onComplete: ()=>{ 
console.log("complete"); 
}, 
bounciness:10 
}) .start (); 
}}/> 
</View> 
) 


} 


修改 index.iosjs 与 index.android.js 文件 后 ， 运 行 工程 ， 可 以 看 到 组 件 尺 寸 变 大 的 过 程 中 会 出 
弹 效 果 。 





现 











使 用 timing 方法 也 可 以 实现 弹簧 动画 ， 只 是 spring 方法 的 动画 配置 参数 中 提供 了 更 方便 的 
弹簧 系数 设置 方式 。 








spring 方法 的 动画 配置 对 象 中 的 可 设置 属性 如 表 8-30 所 示 。 
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表 8-30 spring 方法 动画 配置 对 象 中 的 可 设置 属性 





























属性 名 解释 平台 值 类 型 或 可 选 值 

toValue 设置 动画 结束 值 通用 数值 或 对 应 动画 对 象 
overshootClamping 设置 是 否 限制 边界 通用 布尔 值 
restDisplacementThreshold 位 移 阔 值 通用 数值 

restSpeedThreshold 速度 阔 值 通用 数值 

velocity 设置 初速 度 通用 数值 

bounciness 设置 弹力 通用 数值 

Speed 设置 速度 通用 数值 

tension 设置 张力 通用 数值 

friction 设置 摩擦 力 通用 数值 














8.17.6 ”Interpolation 插值 动画 


在 实际 开发 中 使 用 的 动画 效果 往往 不 是 单独 动作 ， 而 是 一 系列 动作 。 想 象 一 下 ， 你 现在 需要 
将 一 个 视图 的 尺寸 先 放 大 ， 之 后 再 缩小 ， 该 怎么 做 呢 ? 当然 你 可 以 在 放大 动画 结束 后 再 缩小 动画 ， 
只 是 使 用 Interpolator 插值 动画 不 仅 可 以 省 掉 匈 余 代 码 ， 还 会 使 代码 更 加 优雅 。 

Interpolation 动画 的 原理 是 进行 值 的 映射 ， 例 如 动画 视图 高 度 从 10 单位 修改 成 100 单位 ， 就 
可 以 使 用 插值 动画 将 其 分 成 两 个 部 分 ， 当 值 从 10 到 50 之 间 递 增 时 进行 视图 尺寸 的 放大 ， 当 值 从 
50 到 100 之 间 递 增 时 进行 视图 尺寸 的 缩小 。 在 AnimatedDemo.js 文件 中 创建 一 个 新 类 ， 代 码 如 下 : 


export class InterpolationAnimatedDemo extends Component{ 
constructor (props){ 
super (props); 
this.state = { 
animated:new Animated.Value (10), 
3 
this.bindAnimated = new Animated.Interpolation (this.state.animated, { 
inputRange: [10,50,100], 
outputRange: [10,100,50], 
extrapolate:'identity' 
} 
} 
render () { 
return( 
<View> 
<Animated.View style={{marginTop:100,height:this.bindAnimated, 
backgroundColor: 'red'}}></Animated.View> 
<Button title="Start Animation" onPress={ ()=>{ 
Animated.timing (this.state.animated, { 
toValue:100, 
duration:2000 
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}) .start() 7 
}}/> 
</View> 
3 


} 


简单 理解 ，Interpolation 的 作用 是 对 AnimatedValue 对 象 进行 包装 ， 当 AnimatedValue 动画 在 
执行 时 ， 其 值 会 进行 映射 后 再 作用 于 视图 上 ， 你 可 以 任意 设置 插值 个 数 ，inputRange 设置 输入 值 节 
点 ，outputRange 设置 输出 值 节点 ， 其 中 还 可 以 利用 extrapolate 属性 来 设置 当 输入 值 超出 边界 时 的 
处 理 方式 ， 其 可 选 设 置 值 为 “extend”“identity” 或 “clamp”，extend 表示 人 允许 输入 值 超出 边界 ， 
clamp 表示 不 允许 输入 值 超出 边界 , identity 表示 当 输 入 值 超出 边界 后 返回 输入 值 本 身 。 你 也 可 以 单 
独 设置 extrapolateLeft 或 extrapolateRight 属性 来 设置 左 侧 输入 值 超 边界 或 右 侧 输入 值 超 边界 的 处 理 
情况 。 





extrapolateLe 人 还 可 以 将 输入 值 映射 成 弧度 或 角度 ， 在 旋转 动画 中 十 分 有 用 。 


8.17.7 ”聚合 动画 值 


Animated 模块 中 提供 了 许多 聚合 动画 值 的 方法 ， 可 以 将 AnimatedValue 动画 的 值 进行 聚合 计 
算 后 再 作用 于 视图 组 件 上 ， 请 看 如 下 示例 代码 : 


export class AnimatedCalculateDemo extends Component{ 
constructor (props){ 
super (props); 
var animatedl = this.animatedl = new Animated.Value(10); 
var animated2 = this.animated2 = new Rnimated.Value (100); 
this.addAnimated = Animated.add (animated]1,animated2); 
} 
render (){ 
return( 
<View> 
<Animated.View style={{marginTop:100,height:this.addAnimated, 
backgroundColor: 'red'}}></Animated.View> 
<Button title="Start Animation" onPress={()=>{ 
Animated.timing (this.animated]l,{ 
toValue:100, 
duration:2000 
}) .start (); 
}}/> 
</View> 
) 7 
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add 方法 的 作用 是 将 两 个 动画 的 值 相 加 作为 视图 最 终 演 染 的 值 , 被 聚合 的 两 个 动画 既 可 以 单独 
执行 也 可 以 同时 执行 ， 与 add 方法 相似 ，Animated 中 支持 4 种 聚合 动画 的 方式 ， 如 表 8-31 所 示 。 
表 8-31 Animated 支持 的 4 种 聚合 动画 方式 


方法 名 解释 参数 





add 将 两 个 动画 的 值 进行 相 加 计算 。 a: AnimatedValue 动画 对 象 或 数值 
。 b: AnimatedValue 动画 对 象 或 数值 
(ab) 
。 a: AnimatedValue 动画 对 象 或 数值 
。 b: AnimatedValue 动画 对 象 或 数值 
(ab) 
。 a: AnimatedValue 动画 对 象 或 数值 
。 b: AnimatedValue 动画 对 象 或 数值 
(amo) 
，。 a: AnimatedValue 动画 对 象 
。 mo: 取 模 数值 





divide 将 两 个 动画 的 值 进 行 相 除 计算 





multiply 将 两 个 动画 的 值 进行 相 乘 计算 








modulo 将 动画 的 值 进行 取 模 计算 








除了 上 面 列 出 的 4 个 方法 ，Animated 中 还 提供 了 一 个 diffClamp 方法 , 这 个 方法 的 使 用 和 上 
面 4 个 方法 相似 ， 用 来 限制 动画 的 值 在 某 个 范围 之 内 : 


(animated,min,max) 

。 animated: 动画 对 象 
diffClamp 限制 动画 的 值 通用 

。 max: 最 大 值 


8.17.8 组 合 动画 





将 动画 进行 组 合 往往 会 产生 更 加 炫 酷 的 效果 。Animated 框架 中 提供 了 链 式 组 合 动画 sequence 
方法 、 并 行 组 合 动画 parallel 方法 和 重合 组 合 动 画 stagger 方法 ， 如 表 8-32 所 示 。 





表 8-32 Animated 框架 的 组 合 动画 方法 








方法 名 解释 2 参数 
sequence | 依次 执行 一 组 动画 动作 ”| 通用 “| 动画 动作 数组 
(array,config) 
array: 动画 动作 数组 


config: 动画 配置 对 象 ， 其 中 可 设置 属性 如 下 : 
parallel 同时 执行 一 组 动画 动作 通用 { 
stopTogether: 布尔 值 ， 当 某 个 动画 停止 时 ， 是 否 其 他 动画 也 
随 着 停止 

} 
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( 续 表 ) 
3 参数 


(numberarray) 











三 执行 一 组 动画 动作 ， 





stagger 通用 。 number: 延 时 时 间 
。 array: 动画 动作 数组 


通过 延 时 间隔 





sequence 方法 会 无 颖 地 执行 一 组 动画 。 如 果 需 要 在 动画 间 插 入 一 些 延 时 ， 可 以 使 用 Animated 
中 的 delay 方法 , 这 个 方法 可 以 传 入 一 个 数值 作为 延 时 参数 , 并 返回 一 个 空 的 动画 动作 来 消耗 时 间 。 
示例 代码 如 下 : 


export class AnimatedGroupeDemo extends Component{ 





constructor (props){ 
super (props); 
this.animatedl = new Animated.Value(10); 


new Animated.Value (10); 
new Animated.Value (10); 


this.animated2 


this.animated3 
render (){ 
return( 
<View> 
<Animated.View style={{marginTop:100,height:30, 
width:this.animatedl,backgroundColor: 'red'}}></Animated.View> 
<Animated.View style={{marginTop:10,height:30, 
width:this.animated2,backgroundColor: 'red'}}></Animated.View> 
<Animated.View style={{marginTop:10,height:30, 
width:this.animated3,backgroundColor:'red'}}></Animated.View> 
<Button title="Start Sequence Animation" onPress={()=>{ 
var al = Animated.timing (this.animated]1,{ 
toValue:100, 
duration:2000 
}) 7 
var a2 = Animated.timing (this.animated2,{ 
toValue:100， 
duration:2000 
1); 
var a3 = Animated.timing (this.animated3,{ 
toValue:100, 
duration:2000 
Ds; 
Animated.sequence ([al,a2,Animated.delay (2000), 
a3]) .start (); 
}}/> 
<Button title="Start Parallel Animation" onPress={()=>{ 
var al = Animated.timing (this.animated]1,{ 
toValue:100， 
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Var 


Var 


duration:2000 

]) 7 

a2 = Animated.timing (this.animated2,{ 
toValue:100, 

duration:2000 

Hs 

a3 = Animated.timing (this.animated3,{ 
toValue:100, 

duration:2000 

]) 7 


Animated.parallel ([al,a2,a3], {stopTogether: 


false}) .start (); 


}}/> 
<Button 
var 


var 


var 


title="Start Stagger Animation" onPress={()=>{ 
al = Animated.timing (this.animated]1,{ 
toValue:100, 

duration:2000 

}) 7 

a2 = Animated.timing (this.animated2,{ 
toVvalue:100, 

duration:2000 

Ds; 

a3 = Animated.timing (this.animated3,{ 
toValue:100, 

duration:2000 

D); 


Animated.stagger (500, [al,a2,a3]) .start (); 


} } /> 
</View> 
a 


} 


注意 ， 虽 然 上 面 的 代码 演示 了 在 多 个 组 件 上 执行 组 合 动画 ， 实 际 上 你 也 可 以 在 同一 个 视图 组 


件 的 不 同属 性 上 执行 组 合 动画 。 
8.17.9 ”循环 动画 


使 用 Animated 做 循环 动画 也 十 分 容易 ，Animated 框架 中 提供 了 loop 方法 ， 这 个 方法 接收 两 
个 参数 ， 第 1 个 参数 是 要 执行 的 动画 动作 ， 第 2 个 参数 为 循环 动画 配置 对 象 ， 其 中 iterations 属性 


用 来 设置 循环 次 数 ， 示 例如 下 : 


constructor (props){ 
super (props); 
this.animated1l 


= new Animated.Value (10); 
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render (){ 
return( 


<View> 
<Animated.View style={{marginTop:100,height:30, 


width:this.animatedl1,backgroundColor: 'red'}}></Animated.View> 
<Button title="Start Loop Animation" onPress={()=>{ 


var al = Animated.timing (this.animated]1,{ 
toValue:100, 
duration:2000 
]) 7 
RAnimated.loop (al,{iterations:-1}) .start (); 
二 > 
</View> 
) 
} 
属性 如 果 设 置 为 0， 则 动画 不 会 执行 ， 设 置 为 -1 则 会 无 限 循环 执行 。 





注意 ，iterrations 


抽 丝 剥 草 


返回 的 也 是 动画 动作 对 象 ， 可 以 结合 组 合 动画 使 用 。 


Animated 的 loop 方 ; 


8.17.10 布局 动画 


前 面 学 习 的 动画 技术 足够 强大 ， 但 其 并 不 总 是 十 分 方便 。Animated 相关 动画 作用 于 一 个 组 件 
:是 非常 好 用 的 ， 但 是 如 果 在 动画 的 进行 中 多 个 组 件 会 受 影响 ， 那 么 使 用 React Native 中 的 
LayoutAnimation 则 会 更 加 容易 。 

LayoutAnimation 是 专门 提供 给 布局 使 用 的 动画 对 象 ， 当 界面 布局 发 生 改 变 时 ， 使 用 它 可 以 产 
生动 画 效 果 ， 包 括 组 件 位 置 的 变化 、 组 件 尺寸 的 变化 以 及 组 件 添 加 或 删除 等 。 在 AnimatedDemojjs 


文件 中 添加 如 下 示例 代码 : 





import { 
UIManager 
} from 'react-native'; 
UIManager.setLayoutAnimationEnabledExperimental && 
UIManager .setLayoutAnimationEnabledExperimental (true); 
export class LayoutAnimationDemo extends Component{ 
constructor (props){ 
super (props); 
this.state={ 


width:100, 
height:100 
} 
} 
render (){ 


return( 
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<View> 
<View style={{marginTop:100,height:this.state.height, 
width:this.state.width,backgroundColor:'red'}}></View> 
<Button title="Start Animation" onPress={ ()=>{ 
LayoutAnimation.spring(); 
this.setState({ 
width:this.state.width+10， 
height:this.state.height+10 
1); 
> 
</View> 
) 


1 
上 面 的 UIManager 相关 代码 是 为 了 在 Android 平台 开启 布局 动画 所 需要 的 。LayoutAnimation 
的 使 用 十 分 简单 ， 只 需要 在 布局 修改 之 前 调用 如 表 8-33 所 示 的 3 个 方法 中 的 一 个 即 可 。 
表 8-33 ”LayoutAnimation 调 用 方法 
方法 名 参数 
easeInEaseOut 使 用 淡 入 淡出 动画 通用 无 
linear 使 用 线性 动画 通用 无 
spring 
8.17.11” 自 定义 组 件 动画 
React Native 默认 支持 动画 的 组 件 只 有 Image、Text、View 与 ScrollView。 在 实际 开发 中 ， 大 
部 分 视图 组 件 都 是 我 们 自 定义 的 组 件 , 要 使 自 定义 的 组 件 可 以 支持 动画 ， 也 十 分 简单 ， 只 需要 使 用 
createAnimatedComponent 方法 进行 包装 即 可 。 
在 HelloWorld 工程 Demo 文件 夹 下 新 建 一 个 命名 为 CustomAnimatedViewjs 的 文件 ,将 其 作为 
自 定义 组 件 ， 在 其 中 编写 如 下 代码 : 


import React, { Component } from 'react'; 











import { 

View, 

Text 
} from 'react-native'; 
export default class CustomAnimatedView extends Component{ 

render (){ 
return( 
<View> 
<Text style={{marginTop:100,textAlign:'center',fontSize:24, 
opacity:this.props.opacity}}> 自 定义 组 件 </Text> 
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</View> 
); 
}; 
} 


在 AnimatedDemo.js 文件 中 新 建 一 个 类 ， 用 于 测试 动画 ， 代 码 如 下 : 


export class CustomAnimationViewDemo extends Component{ 
constructor (props){ 
super (props); 
this.animatedl = new Animated.Value (1); 
this.aniView = Animated.createAnimatedComponent (CustomAnimatedView); 
} 


render (){ 


return ( 
<View> 
<this.aniView opacity={this.animated1}/> 
<Button title="Start Animation" onPress={ ()=>{ 
Animated.timing (this.animated]1, { 
toValue:0, 
duration:2000 
}) .start (); 
9/2 
</View> 


); 


} 
修改 index 相关 文件 后 ， 运 行 工 程 ， 可 以 看 到 自 定义 的 组 件 也 可 以 支持 动画 效果 。 


8.18 调用 设备 振动 模块 


振动 作为 移动 设备 上 的 一 种 触感 反馈 是 一 种 十 分 重要 的 交互 方式 。 在 React Native 中 调用 设备 
的 振动 模块 也 十 分 容易 。React Native 中 提供 了 一 个 Vibration 对 象 ， 此 对 象 中 封装 了 两 个 方法 ， 如 
表 8-34 所 示 。 

注意 ， 在 Android 平台 上 调用 振动 模块 需要 在 AndroidManifestxml 文件 中 添加 如 下 权限 申请 
代码 : 


<uses-permission android:name="android.permission.VIBRATE"/> 
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表 8-34 Vibration 对象 的 方法 


方法 名 解释 参数 


接收 两 个 参数 (arrayre) 

。 array: 数值 数组 ,在 Android 平台 ， 第 1 个 元 素 表 
示 延 时 时 间 ， 第 2 个 元 素 表示 振动 时 长 ， 依 此 类 
推 ， 第 3 个 参数 为 延 时 ， 第 4 个 参数 为 振动 时 长 。 
在 iOS 平台 则 不 同 , iOS 设备 的 振动 时 长 固定 , 这 
个 数组 中 所 有 的 参数 均 表 示 延 时 时 长 

， re: 表示 是 否 循环 振动 ， 如 果 设 置 为 YES， 则 只 能 
通过 调用 cancel 方法 结束 振动 





vibrate “| 此 方法 用 来 调用 设备 的 振动 模块 











cancel “| 结束 振动 
示例 代码 如 下 : 


import React, { Component } from 'react'; 
import { 
Button, 
View, 
Vibration 
} from 'react-native'; 
export default class VibrationDemo extends Component{ 
render (){ 
return( 
<View> 
<Button title="Vibration" onPress={()=>{ 
Vibration.vibrate([1000,2000,1000,2000],false); 
}}/> 
</View> 


注意 ， 本 节 内 容 需 要 在 真 机 上 验证 ， 关 于 如 何 将 React Native 项 目 运行 在 真 机 上 ， 后面 会 有 
专门 的 介绍 。 





8.19 ”封装 滑动 手势 


你 应 该 还 记得 ,我 们 在 学 习 View 组 件 的 时 候 曾 介绍 过 React Native 组 件 的 用 户 触摸 系统 , View 
组 件 中 提供 了 许多 回调 属性 来 响应 用 户 的 触摸 请 求 。 在 实际 开发 中 ， 除 了 点 按 手 势 外 ， 最 常用 的 要 
数 滑动 手势 了 。React Native 中 提供 了 PanResponder 对 象 来 更 轻松 地 创建 滑动 手势 。 
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PanResponder 对 象 调用 create 方法 可 以 创建 滑动 手势 对 象 ， 其 中 可 以 设置 许多 回调 属性 ， 如 
表 8-35 所 示 。 


表 8-35 PanResponder 可 以 设置 的 回调 属性 





属性 名 意义 平台 值 类 型 
onMoveShouldSetPanResponder 设置 是 否 允 许 成 为 移动 响应 接收 者 | 通用 | 函数 ， 需 要 返回 布尔 值 





onMoveShouldSetPanResponderCapture 





布 
设置 是 否 人 允许 拦截 子 组 件 移动 响应 | 通用 | 函数 ， 需 要 返回 布尔 值 
设置 是 否 允许 成 为 触摸 事件 响应 接 布 




















‘onStartShouldSetPanResponder 收 者 通用 | 函数 ， 需 要 返回 布尔 值 
onStartShouldSetPanResponderCapture ee 通用 | 函数 ， 需 要 返回 布尔 值 
onPanResponderGrant 成 为 响应 者 回调 的 函数 通用 | 函数 
onPanResponderStart 开始 响应 触摸 事件 回调 通用 | 函数 
onPanResponderReject 拒绝 成 为 事件 响应 者 回调 通用 | 函数 
onPanResponderEnd 完成 事件 响应 回调 通用 | 函数 
onPanResponderRelease 触摸 结束 回调 通用 | 函数 
onPanResponderMove 触摸 点 移动 时 回调 通用 | 函数 
onPanResponderTerminate 触摸 事件 被 中 断 时 回调 通用 | 函数 











接收 到 触摸 事件 中 断 请 求 时 回调 ”| 通用 | 函数 


onPanResponderTerminationRequest 





在 HelloWorld 工程 的 Demo 文件 夹 下 新 建 一 个 命名 为 PanResponderDemojs 的 文件 , 在 其 中 编 
写 如 下 代码 : 


import React, { 
Component 
} from 'react'; 
import { 
View, 
PanResponder, 
Text 
} from 'react-native'; 
export default class PanResponderDemo extends Component { 
constructor (props) { 
super (props); 
this.state = { 
eventName: '', 
Pos: "', 
}; 
this.myPanResponder = PanResponder.create({ 
// 要 求 成 为 响应 者 : 
onStartShouldSetPanResponder: (evt, gestureState) => true, 
onStartShouldSetPanResponderCapture: (evt, gestureState) => true, 
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onMoveShouldSetPanResponder: (evt, gestureState) => true, 
onMoveShouldSetPanResponderCapture: (evt, gestureState) => true, 
onPanResponderTerminationRequest: (evt, gestureState) => true, 
// 响 应 对 应 事件 后 的 处 理 : 
onPanResponderGrant: (evt, gestureState) => { 
this.state.eventName = ' 触 摸 开始 '; 
this.forceUpdate(); 
} 
onPanResponderMove: (evt，gestureState) => { 
Var Pos = 'x:' + gestureState.moveX + ',y:' + 
gestureState.moveY; 
this.setSstate({ 
eventName: ' 移 动 '， 
pos: pos 
LD 
}, 
onPanResponderRelease: (evt, gestureState) => { 
this .setState({ 
eventName: ' 抬 手 ' 
1); 
}, 
onPanResponderTerminate: (evt, gestureState) => { 
this.setSstatel({ 
eventName: ' 另 一 个 组 件 已 经 成 为 了 新 的 响应 者 ' 
入 
下 
2 
} 
render() { 
return ( 
<View style={{flex:1}} {...this.myPanResponder.panHandlers}> 
<Text 
style={ {top:100,textAlign:'center'}}>eventName:{this.state.eventName} |{this.st 
ate.pos}</Text> 
</View>); 
} 


运行 工程 ， 在 屏幕 上 移动 手指 ， 可 以 看 到 Text 组 件 显示 出 的 手指 位 置信 息 。 


滑动 手势 对 象 的 panHandlers 属性 是 对 View 触摸 事件 的 集合 包装 对 象 。 上 面 的 代码 使 用 了 
一 个 技巧 ,，“...” 运 算 符 会 将 对 象 的 属性 进行 拆 解 ， 作 为 View 组 件 的 属性 。 





292 | React Native 全 教程 : 移动 端 跨 平台 应 用 开发 


8.20 获取 屏幕 尺寸 信息 


在 实际 开发 中 ， 时 常 需 要 获取 设备 的 屏幕 尺寸 信息 ， 这 对 布局 十 分 重要 。 在 React Native 中 提 
供 了 Dimensions 对 象 来 提取 设备 屏幕 尺寸 信息 。 

在 HelloWorld 工程 的 Demo 文件 夹 下 新 建 一 个 命名 为 DimensionsDemo.js 的 文件 , 在 其 中 编写 
如 下 代码 : 


import React, { Component } from 'react'; 





import { 
View, 
Text, 
Dimensions 
} from 'react-native'; 


export default class DimensionsDemo extends Component{ 
render (){ 

returnl( 

<View style={{paddingTop:100}}> 
<Text>{f" 屏 幕 尺 寸 信息 "+Dimensions.get('window') .width+"-"+ 
Dimensions.get ('window') .height}</Text> 

</View> 

Dx 


} 
get 方法 用 来 获取 设备 屏幕 尺寸 信息 ， 运 行 工 程 ， 效 果 如 图 8-25 所 示 。 


Phone SE -OS 102 T7405) 
后 10:10 AM 


条 尺 二 信息 320-568 





图 8-25 获取 设备 屏幕 尺寸 信息 
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8.21 特定 平台 代码 


虽然 React Native 提供 了 基本 统一 的 跨 平 台 开发 接口 ， 但 是 针对 不 同 的 平台 ， 例 如 在 Android 
和 iOS 上 ， 我 们 还 是 希望 可 以 根据 用 户 的 习惯 进行 分 平台 定制 。 其 实 前 面 你 已 经 学 习 过 ， 可 以 通 
过 在 文件 命名 时 添加 ios 或 者 android 后 绥 来 使 React Native 分 平台 加 载 文件 , 在 同一 个 文件 中 ,你 
也 可 以 分 平台 来 编写 代码 。 

React Native 中 提供 了 Platform 对 象 ， 这 个 对 象 中 包含 有 平台 信息 ， 并 且 提供 了 简洁 的 方法 来 
支持 分 平台 代码 编写 。Platform 对 象 中 提供 的 属性 如 表 8-36 所 示 。 


表 8-36 ”Platform 对 象 中 提供 的 属性 


属性 名 值 类 型 或 可 选 值 


po 
i 


本 | 获取 当前 系统 版 本 | 字符 串 


OS 





isPad 设备 是 否 是 iPad lios | 布尔 值 
isTVOS 是 否 是 TVOS 系统 lios | 布尔 值 


Platform 对 象 中 还 提供 了 一 个 select 函数 ， 这 个 函数 需要 接收 一 个 对 象 作为 参数 ， 对 象 中 可 以 
定义 3 个 属性 ， 即 ios、android 和 default。 当 系 统 为 iOS 时 ，select 方法 会 将 其 中 ios 属性 对 应 的 
值 返回 ， 当 系统 是 Android 时 ，select 方法 会 将 属性 android 对 应 的 值 返回 ， default 属性 用 于 设置 默 
认 值 ， 当 没有 设置 ios 属性 或 android 属性 时 会 返回 default 属性 的 值 。 

在 HelloWorld 工程 的 Demo 文件 夹 中 新 建 一 个 命名 为 PlatformDemo.js 的 文件 , 在 其 中 编写 如 
下 示例 代码 : 

import React, { Component } from 'react'; 

import { 








View, 
Text, 
Platform, 
StyleSheet 
} from 'react-native'; 


export default class PlatformDemo extends Component{ 
constructor (props){ 
super (props); 
if (Platform.OS==="ios") { 
this.title = "ios"; 
} 
if (Platform.OS==="android") 1 
this .title = "android"; 
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» 
console.log (Platform.Version); 


render (){ 
return( 
<View > 
<Text style={sty.view}>{this.title}</Text> 
</View> 


Var sty = StyleSheet.createl({ 
view:{ 
...Platform.select({ 

default: {backgroundColor: 'red',flex:1}, 

ios: {marginTop:100,color:'blue',fontSize:24,textAlign: 
'center'}, 

android: {marginTop:200,color:'green',fontSize:24,textAlign: 
'center'} 


Fs 
分 别 在 iOS 和 Android 平台 运行 工程 ， 可 以 看 到 不 同 平台 的 不 同 效果 。 


8.22 ”定时 器 的 简单 应 用 


在 原生 应 用 开发 中 ， 常 常会 使 用 到 定时 器 。 使 用 定时 器 的 场景 无 非 两 种 ， 一 种 是 延迟 一 定时 
间 后 执行 某 个 事件 , 一 种 是 每 间隔 一 定时 间 执 行 某 个 事件 。React Native 中 提供 了 与 Web 开发 中 一 
致 的 定时 器 方法 ， 如 表 8-37 所 示 。 
表 8-37 ”Native 提供 的 定时 器 方法 


方法 名 意义 Ci 参数 





(func,time,...) 

。 func: 回调 函数 

， time: 延 时 时 间 ， 单 位 为 毫秒 
" …: 可 以 传 入 回调 函数 的 参数 
(func,time) 
， func: 回调 函数 

*_time: 间隔 时 间 ， 单 位 为 毫秒 


setTimeout | 延 时 一 定时 间 后 执行 回调 函数 通用 








setInterval “| 设置 每 间隔 一 定时 间 执 行 回 调 函 数 通用 
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React Native 中 还 提供 了 clearTimeout 与 clearInterval 函数 , 使 用 这 两 个 方法 可 以 手动 停止 定时 
器 。 有 一 点 需要 格外 注意 ， 当 组 件 外 载 时 ， 必 须 将 组 件 中 的 定时 器 清除 掉 ， 否 则 会 出 现 意外 的 崩溃 
现象 。 

在 HelloWorld 工程 的 Demo 文件 夹 下 新 建 一 个 命名 为 TimerDemojjs 的 文件 , 在 其 中 编写 如 下 
代码 : 


import React, { Component } from 'react'; 





import { 
Button, 
View 


} from 'react-native'; 


export default class TimerDemo extends Component{ 
render (){ 
return( 
<View style={{marginTop:100}}> 
<Button title="TimeOut" onPress={()=>{ 
this.timerout=setTimeout (()=>{ 
console.log("TimeOut"); 
}, 3000); 
}} /> 
<Button title="TimeInterval" onPress={()=>{ 
this.timeInterval=setInterval (()=>{ 
console.log("setInterval"); 
},3000); 
YW 
</View> 
FF 
} 
componentWillUnmount (){ 
this.timerout&&clearTimeout (this.timerout); 
this.timeInterval&&clearInterval (this.timeInterval); 


运行 工程 ， 打 开 调 试 模式 ， 可 以 看 到 定时 器 的 执行 状况 。 定 时 器 时 常用 于 按照 一 定 频率 刷新 
界面 ， 例 如 有 倒计时 模块 的 界面 ， 可 以 使 用 定时 器 来 进行 界面 时 间 Text 标签 的 刷新 。 


实战 项 目 ， 汇率 转换 器 


从 本 章 开始 ， 介 绍 几 个 真实 项 目的 训练 ， 你 将 使 用 前 边 所 学 习 的 各 种 知识 开发 出 一 些 属 于 你 
的 完整 应 用 程序 。 完 整 项 目的 开发 学 习 和 独立 组 件 或 独立 技术 的 学 习 有 很 大 不 同 , 在 学 习 独 立 组 件 
时 ， 你 需要 关注 组 件 如 何 用 和 怎么 用 ， 而 在 学 习 完整 应 用 时 ， 你 需要 将 更 多 的 精力 放 在 思考 程序 的 
逻辑 、 设 计 程 序 的 结构 上 。 不 过 不 用 担心 , 在 后 面 几 章 的 学 习 中 , 我 们 将 一 起 由 简 入 深 、 由 易 到 难 ， 
逐步 掌握 React Native 开发 技术 。 

本 章 将 从 最 基础 的 单 界 面 应 用 程序 开始 ， 汇 率 转化 器 是 一 款 用 于 汇率 计算 的 小 工具 软件 ， 支 
持 人 民 币 与 美元 的 互相 转换 ， 完 整 应 用 效果 如 图 9-1 所 示 。 


到 人 民 币 


4415.30¥ 





图 9-1 汇率 转化 器 
下 面 我 们 就 来 一 步 步 完 成 第 一 款 React Native 应 用 。 
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9.1 搭建 汇率 转换 如 项 目 主 界 面 


在 开始 应 用 程序 开发 之 前 ， 首 先 需 要 确定 程序 的 结构 。 清 晰 的 结构 可 以 使 应 用 程序 的 维护 与 
扩展 变 得 更 加 容易 。 首 先 打开 终端 ， 在 应 用 目录 下 新 建 一 个 React Native 项 目 ， 使 用 如 下 命令 : 


react-native init Calu 


Calu 为 汇率 转换 器 项 目的 工程 名 。 使 用 Sublime Test 工具 打开 工程 ， 在 根 目 录 下 创建 命名 为 
ViewController 和 View 的 文件 夹 ， 分 别 放置 项 目的 视图 控制 器 文件 与 视图 文件 。 在 进行 项 目 结构 
的 设计 时 , 建议 从 最 基础 的 MVC 模式 开始 , 这 也 是 本 书 实战 项 目 所 选用 的 结构 。 在 MVC 模式 中 ， 
M 为 Model， 即 数据 模型 ， 在 有 网 络 模块 的 项 目 中 十 分 重要 ， 后 面 的 项 目 中 将 会 了 解 到 Model 的 
设计 和 使 用 ; V 为 View， 即 视图 ， 用 来 泻 染 界面 ， 例 如 进行 组 件 的 风格 设置 、 组 件 的 布局 等 ，C 
为 Controller， 即 控制 器 ,通常 我 们 会 把 业务 逻辑 放 入 Controller 中 。 如 此 分 工 协作 ， 便 很 容易 将 业 
务 逻 辑 、 视 图 和 数据 分 开 ， 增 强项 目的 封装 性 与 复 用 性 。 

首先 在 ViewController 文件 夹 下 新 建 一 个 命名 为 RootViewControllerjs 的 文件 ， 作 为 整个 应 用 
程序 的 主 控制 器 。 其 实 汇率 转换 器 软件 十 分 简单 ， 只 有 一 个 界面 ， 因 此 这 个 控制 器 也 是 整个 项 目 唯 
一 的 控制 器 。 先 在 其 中 编写 如 下 代码 : 

import React, { Component } from 'react'; 

import RootView from './../View/RootView'; 

export default class RootViewController{ 

view(){ 





return( 
<RootView /> 
) 7 


} 


上 面 的 代码 只 给 RootViewController 类 实现 了 一 个 view 方法 ， 用 来 返回 应 用 程序 的 主 界面 ， 
后 面 我 们 会 逐步 丰满 这 个 控制 器 类 。 
在 View 文件 夹 下 新 建 一 个 命名 为 RootView.js 的 文件 ， 在 其 中 编写 如 下 代码 : 


import React, { Component } from 'react'; 
import { 

AppRegistry, 

StyleSheet, 

View 
} from 'react-native'; 
export default class RootView extends Component{ 

render (){ 
return( 
<View style={rootStyle.rootView}> 
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<View style={rootStyle.screenView}></View> 
<View style={rootStyle.keyboardView}></View> 
</View> 
Dn 


let rootStyle = StyleSheet.create({ 

rootView:{ 
flex:1 

}, 

screenView:{ 
backgroundColor: 'rgb(234,86,37)', 
flex:1 

}, 

keyboardView:{ 
backgroundColor:'rgb(38,41,42)', 
flex:2 


]) 

上 面 的 代码 简单 实现 了 页 面 的 整体 结构 ， 我 们 将 其 分 为 两 部 分 : 上 半 部 分 占 三 分 之 一 ， 用 来 
显示 用 户 的 输入 信息 和 汇率 的 转换 信息 ; 下 半 部 分 占 三 分 之 二 ， 为 键盘 部 分 ， 用 来 进行 用 户 输入 。 
React Native 有 十 分 强大 的 布局 引擎 ， 因 此 我 们 可 以 十 分 轻松 地 实现 布局 的 自 适应 ， 无 论 在 iOS 设 
备 还 是 Android 设备 ， 也 无 论 屏幕 尺寸 如 何 、 设 备 方向 如 何 ， 屏 幕 部 分 总 是 会 占据 整个 界面 的 三 分 
之 一 ， 键 盘 部 分 总 是 会 占据 界面 的 三 分 之 二 。 

修改 index.iosjs 与 index.android.js 文件 如 下 : 


import React, { Component } from 'react'; 
import { 
AppRegistry, 
} from 'react-native'; 
import RootViewController from './ViewController/RootViewController'; 
export default class Calu extends Component { 
constructor (props){ 
super (props); 
this.rootController = new RootViewController(); 
} 
render() { 
return this.rootController.view(); 


} 
AppRegistry.registerComponent ('Calu', () => Calu); 


运行 工程 ， 竖 屏 和 横 屏 模式 下 的 界面 效果 如 图 9-2 与 图 9-3 所 示 。 
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图 9-2” 竖 屏 模式 下 的 主 界面 布局 图 9-3 ” 横 屏 模式 下 的 主 界面 布局 
9.2 ”显示 屏 面 板 的 初步 开发 


本 节 我 们 将 对 汇率 计算 器 的 屏幕 面板 进行 初步 的 界面 开发 。 首 先 屏幕 面板 上 面 有 4 行文 字 ， 
可 分 为 两 类 ,一 类 用 于 描述 货币 类 型 ,一 类 用 于 显示 货币 数量 ,除了 这 4 行文 本 外 ， 显 示 屏 的 中 间 
还 有 一 条 分 割 线 和 一 个 切换 按钮 ， 我 们 可 以 对 分 割 线 和 切换 按钮 进行 进一步 的 封装 。 

需要 在 横 屏 和 竖 屏 模式 下 ， 显 示 屏 的 具体 高 度 并 不 一 样 ， 因 此 我 们 需要 监听 屏幕 的 切 
换 来 对 界面 进行 重新 布局 。View 组 件 的 onLayout 属性 就 是 当 界 面 布局 改变 时 被 调用 的 ， 我 们 可 以 
在 其 中 进行 显示 屏 布局 的 重新 处 理 。 

编写 RootView.js 文件 如 下 : 








import React, { Component } from 'react'; 
import { 
AppRegistry, 
StyleSheet, 
View, 
Text, 
Dimensions 
} from 'react-native'; 
export default class RootView extends Component{ 


constructor (props){ 
super (props); 
this.state={ 
topText :" 从 美元 "， 
bottomText:" 到 人 民 币 "， 
dollar:"659$", 
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RMB:"4415.30¥", 
ScreenStyle:rootStyle， 


由 
render (){ 
return( 
<View style={this.state.screenStyle.rootView} 
onLayout={this. onlayout}> 
<View style={this.state.screenStyle.screenView}> 
<Text style={this.state.screenStyle.titleText}> 
{this.state.topText}</Text> 
<Text style={this.state.screenStyle.numText}> 
{this.state.dollar}</Text> 
<View style={{height:20}}> 
</View> 
<Text style={this.state.screenStyle.titleText}> 
{this.state.bottomText}</Text> 
<Text style={this.state.screenStyle.numText}> 
{this.state.RMB}</Text> 
</View> 
<View style={this.state.screenStyle.keyboardView}></View> 
</View> 
); 
} 
_onlayout=()=>{ 
let {width,height} = Dimensions.get('window')7 
if (width>height) { 
this.setState({ 
ScreenStyle:rootStyle2， 
2 
}else{ 
this.setState({ 
screenStyle:rootStyle, 


Var rootStyle = StyleSheet.create({ 
rootView:{ 
flex:1 
ky 
screenView:{ 
backgroundColor: 'rgb (234,86,37)', 
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1); 
let 


flexslr 
PaddingTop :22 

}， 

keyboardView:{ 
backgroundCcolor:'rgb (38,41,42) 
flex:2 

}, 

titleText:{ 
textAlign:'right', 
fontSize:20, 
color: 'white', 
marginRight:20 

}, 

numText:{ 
textAlign:'right', 
fontSize:27, 
color: 'white', 
marginRight:20, 
marginTop:10 


rootStyle2 = StyleSheet.create({ 

rootView:{ 
flex:1 

}, 

screenView:{ 
backgroundColor: 'rgb(234,86,37)', 
flex:1, 
paddingTop:10 

}, 

keyboardView:{ 
backgroundColor:'rgb(38,41,42) 
flex:2 

}, 

titleText:{ 
textAlign:'right', 
fontSize:14， 
Color:'white'v 
marginRight:20 

}, 

numText:{ 
textAlign:'right', 
fontSsize:22, 
color: 'white', 
marginRight:20, 
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marginTop:2 


1); 


上 面 的 代码 在 判断 设备 横竖 屏 时 使 用 到 一 个 小 技巧 ， 即 当 设备 宽度 大 于 高 度 时 认为 是 横 屏 ， 
当 设 备 高 度 大 于 宽度 时 认为 是 竖 屏 。 运 行 工程 ， 横 紧 屏 效果 如 图 9-4 与 图 9-5 所 示 。 











从 美元 
659$ 

到 人 民 币 
4415.30¥ 


从 美元 
659$ 


到 人 民 币 
4415.30¥ 





图 94 横 屏 模式 图 9-5 竖 屏 模式 


9.3 ”货币 类 型 切换 功能 开发 


9.2 节 我 们 完成 了 显示 屏 上 货币 名 称 与 数值 文案 组 件 的 布局 ， 本 节 需 要 完成 显示 屏 的 唯一 逻辑 
功能 ， 即 切换 要 转换 的 货币 类 型 ， 在 做 这 个 功能 时 ， 我 们 首先 应 该 设置 布局 ， 接 着 9.2 节 的 代码 ， 
在 预 留 的 中 间 View 中 填充 转换 按钮 和 分 割 线 组 件 ， 回 忆 下 我 们 所 学 习 的 布局 技术 ， 我 们 可 以 将 这 
个 视图 设置 为 水 平 布局 ， 左 边 放置 转换 按钮 ， 右 边 放 置 分 割 线 ， 实 现代 码 如 下 


return( 





<View style={this.state.screenStyle.rootView} onLayout= 
{this. onlayout}> 
<View style={this.state.screenStyle.screenView}> 
<Text style={this.state.screenStyle.titleText}> 
{this.state.topText}</Text> 
<Text style={this.state.screenStyle.numText}> 
{this.state.dollar}</Text> 
<View style={this.state.screenStyle.changeView}> 
<TouchableHighlight underlayColor='rgb (234,86,37)"' 
onPress={ ()=>{ 
this.props.controller.change (); 
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yz 
<Image style={this.state.screenStyle.touchView} 
source={require("../src/exchange.png")} /> 
</TouchableHighlight> 
<View style={this.state.screenStyle.lineView}> 
</View> 
</View> 
<Text style={this.state.screenStyle.titleText}> 
{this.state.bottomText}</Text> 
<Text style={this.state.screenStyle.numText}> 
{this.state.RMB}</Text> 
</View> 
<View style={this.state.screenStyle.keyboardView}></View> 
</View> 
); 


切记 不 要 忘记 引入 Image 组 件 和 TouchableHighlight 组 件 。 上 面 还 省 略 了 向 项 目 中 导入 图 片 


素材 的 步骤 ， 你 需要 在 项 目 根 目录 中 新 建 一 个 命名 为 sre 的 文件 夹 ， 将 本 书 提供 的 关于 本 项 
目的 素材 导入 进去 。 





你 一 定 注意 到 了 ， 上 边 的 代码 在 实现 按钮 触发 方法 的 时 候 使 用 到 了 这 样 的 代码 : 

this.props.controller.change (); 

这 其 实 就 是 我 们 所 说 的 逻辑 的 分 离 , 我 们 将 转换 货币 类 型 的 逻辑 放 入 Controller 中 进行 处 理 , 这 
里 先 提前 对 RootViewController 进行 使 用 ， 后 面 我 们 会 修改 RootViewController 中 的 代码 。 

直接 运行 工程 并 不 能 达到 预期 的 效果 ， 需 要 添加 几 个 样式 表 ， 代 码 如 下 : 

Var rootStyle = StyleSheet.create({ 


rootView:{ 
flex:1 











}, 

screenView:{ 
backgroundColor: 'rgb (234,86,37)', 
flex:1, 
PaddingTop :22 

}, 

keyboardView:{ 
backgroundColor:'rgb(38,41,42)', 
flex:2 

}, 

titleText:{ 
textAlign:'right', 
fontSize:20， 
color: 'white', 
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marginRight:20 

hz 

numText:{ 
textAlign:'right', 
fontSize:27, 
color: 'white', 
marginRight:20, 
marginTop:10 

}, 

changeView:{ 
flexDirection:'row', 

}, 

touchView:{ 
width:18, 
height:18, 
marginTop:1, 
marginLeft:70 

}, 

lineView:{ 
backgroundColor: 'white', 
height:1, 
f1exs1s 
marginTop:9, 
marginLeft:20 


rootStyle2 = StyleSheet .create({ 
rootView:{ 
flex:1 
}, 
screenView:{ 
backgroundColor:'rgb (234,86,37)', 
flex:1, 
paddingTop:10 
}, 
keyboardView:{ 
backgroundColor: 'rgb(38,41,42)', 
flex:2 
}, 
titleText:{ 
textAlign:'right', 
fontSize:14, 
color: 'white', 
marginRight:20 
jy 
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numText:{ 
textAlign:'right', 
fontSize:22, 
color: 'white', 
marginRight:20, 
marginTop:2 

}, 

changeView:{ 
flexDirection:'row', 


} 

touchView:{ 
width:18, 
height:18, 
marginTop:1, 
marginLeft:300 

}, 


lineView:{ 
backgroundColor: 'white', 
height:1, 
flex: ly 
marginTop:9, 
marginLeft:20 


J 
此 时 运行 工程 ， 效 果 如 图 9-6 所 示 。 


到 人 民 币 
4415.30¥ 





图 9-6 添加 转换 按钮 
界面 布局 完成 只 是 我 们 本 节 要 做 的 工作 的 一 半 ， 还 需要 为 其 添加 上 转换 功能 ， 即 如 果 当 前 是 
从 美元 到 人 民 币 ,那么 当 用 户 单 击 转换 按钮 后 ， 界 面 应 该 更 新 为 从 人 民 币 到 美元 ,如果 当前 是 从 人 
民 币 到 美元 ， 那 么 用 户 单 击 转换 按钮 后 ， 界 面 应 该 更 新 为 从 美元 到 人 民 币 。 首 先 应 该 在 RootView 
类 中 添加 一 个 属性 来 标记 当前 的 模式 ， 添 加 一 个 方法 来 进行 界面 更 新 ， 代 码 如 下 : 
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isDollarToRMB = true; 
exchange (isDollar){ 
if (!isDollar){ 
this.setState({ 
topText:" 从 人 民 币 "， 
bottomText :" 到 美元 "， 
和 
}else{ 
this.setState({ 
topText :" 从 美元 "， 
bottomText:" 到 人 民 币 "， 
this.isDollarToRMB = !this.isDollarToRMB; 
} 
到 此 RootView 类 的 开发 先 告 一 段落 ， 我 们 需要 修改 RootViewController， 代 码 如 下 : 
export default class RootViewController extends Component{ 
render (){ 
return( 
<RootView controller={this} ref='rootView'/> 
); 
} 
change=()=>{ 
if (this.refs.rootView.isDollarToRMB) { 
this.refs.rootView.exchange (false); 
}else{ 
this.refs.rootView.exchange (true); 
} 


本 

让 RootViewController 继承 自 Component 组 件 后 ， 你 可 以 方便 地 操作 ref 来 获取 界面 中 的 子 组 
件 ， 当 用 户 单 击 转换 按钮 时 ，TouchableHighlight 的 触发 函数 会 调用 RootViewController 实例 的 
change 方法 ， 在 这 个 方法 中 进行 逻辑 判断 ， 并 重新 刷新 RootView 界面 。 再 次 运行 工程 ， 单 击 转换 
按钮 ， 已 经 可 以 看 到 转换 效果 。 


9.4 键盘 界面 设计 


分 析 键 盘 界 面 ， 其 实际 上 是 由 一 些 按钮 排列 组 合 而 成 ， 因 此 我 们 可 以 先进 行 键盘 按钮 的 设计 ， 
在 View 文件 夹 下 新 建 一 个 命名 为 NumButtonjs 的 文件 ， 在 其 中 编写 如 下 代码 : 
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import React, { Component } from 'react'; 
import { 
StyleSheet, 
Text, 
Image, 
TouchableHighlight, 
View 
} from 'react-native'; 
export default class NumberButton extends Component{ 
render (){ 
if (this.props.model==="text") { 
return( 
<TouchableHighlight style={ [this.props.style, 
{flexDirection:'row'}]} onPress={()=>{ 
}}> 
<Text style={{textAlign:'center',flex:1, 
alignSelf:'center',color: 'white', fontSize:22}}>{this.props.title}</Text> 
</TouchableHighlight> 
); 
}elsef 
return( 
<TouchableHighlight style={ [this.props.style, 
{flexDirection:'row'}]}> 
<View style={{alignSelf:'center',flex:1}}> 
<Image style={{alignSelf:'center', width:45, 
height:30}} source={require('../src/delete.png')}/> 
</View> 
</TouchableHighlight> 
); 


上 面 的 代码 将 键盘 按钮 分 为 了 两 类 ， 一 类 是 纯 文本 的 按钮 ， 一 类 是 图 标 按钮 。 在 设计 键盘 按 
钮 时 ,需要 注意 哪些 属性 要 封装 在 内 部 、 哪 些 属性 要 由 调用 方 提供 , 例如 ,键盘 中 文字 或 图 标的 居 
中 对 齐 相关 的 风格 属性 应 该 封装 在 NumberButton 类 内 部 ， 但 是 按钮 的 布局 、 颜 色 和 显示 的 文案 或 
图 标 则 应 该 由 调用 方 来 设置 ， 这 样 的 组 件 才 有 复 用 性 。 

修改 RootView 类 的 constructor 方法 ， 在 其 中 进行 按钮 的 循环 创建 : 


constructor (props){ 
super (props); 
this.state={ 
topText :" 从 美元 "， 
bottomText:" 到 人 民 币 "， 
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dollar:"659$", 
RMB:"4415.30¥", 
screenStyle:rootStyle, 
3 
Var array = new Array(); 
Ww los mw [le lo 二 下 
bm nt aod ed eh ed hd) | 
for {var 1 = 0 1 < 16r +t) { 
let element; 
if (i==3) { 
element = (<NumButton key={i} style= 
../src/delete.png" model="image" 








alignSelf:'stretch'}} source= 
title={titles[i]}/>); 
}else if(i==12||i==15){ 
element = (<NumButton key={i} style={{flex:1, 
alignSelf:'stretch',backgroundColor:'rgb(234,86,37)'}} title={titles[i]} 
model="text" />); 
} 
elsef{ 
element = (<NumButton key={i} style={{flex:1, 
alignSelf:'stretch'}} title={titles[i]} model="text" />) 
} 
array.push (element); 
} 
this.numberButton = array; 
} 


键盘 上 的 按钮 总 共 分 为 4 行 , 每 行 4 列 , 在 布局 时 , 我 们 可 以 将 每 4 个 按钮 包装 在 一 个 行 View 
组 件 中 ， 实 现 RootView 类 的 render 方法 如 下 : 


render (){ 
return( 
<View style={this.state.screenStyle.rootView} onLayout= 
{this. onlayout}> 
<View style={this.state.screenStyle.screenView}> 
<Text style={this.state.screenStyle.titleText}> 
{this.state.topText}</Text> 
<Text style={this.state.screenStyle.numText}> 
{this.state.dollar}</Text> 
<View style={this.state.screenStyle.changeView}> 
<TouchableHighlight underlayColor='rgb (234,86,37)"' 
onPress={ ()=>{ 
this.props.controller.change (); 
]}> 
<Image style={this.state.screenStyle . 


touchView}/> 
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</TouchableHighlight> 
<View style={this.state.screenStyle.lineView}> 
</View> 
</View> 
<Text style={this.state.screenStyle.titleText}> 
{this.state.bottomText}</Text> 
<Text style={this.state.screenStyle.numText}> 
{this.state.RMB}</Text> 
</View> 
<View style={this.state.screenStyle.keyboardView}> 
<View style={this.state.screenStyle.rowView}> 
1 
this .numberButton.slice(0,4) 
} 
</View> 
<View style={this.state.screenStyle.rowView}> 
{ 
this .numberButton.slice(4,8) 
} 
</View> 
<View style={this.state.screenStyle.rowView}> 
| 
this .numberButton.slice(8,12) 
} 
</View> 
<View style={this.state.screenStyle.rowView}> 
{ 
this.numberButton.slice(12,16) 
} 
</View> 
</View> 
</View> 


} 
最 后 ， 进 行 样式 的 编写 ， 无 论 横 屏 竖 屏 ， 下 列 的 样式 都 是 通用 的 : 


rowView:{ 
flexDirection:'row', 
flex:1 

}, 

numButtonStyle:{ 
flex:1, 

} 


运行 工程 ， 效 果 如 图 9-7 所 示 。 
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到 人 民 币 
4415.30¥ 





图 9-7 设计 键盘 界面 
9.5 ”实现 汇率 转换 器 核心 功能 


汇率 转换 器 的 核心 功能 无 非 是 用 户 输入 某 种 货币 的 数量 ， 单 击 等 号 按钮 后 ， 将 其 转换 为 另 
种 货币 的 数量 。 在 具体 编写 代码 时 , 我 们 可 以 将 键盘 按钮 的 功能 分 类 处 理 。 首 先 修改 NumberButton 
类 ， 将 按钮 的 触发 逻辑 交 由 上 层 控制 器 处 理 : 


render () { 
if (this.props.model==="text") { 
return( 
<TouchableHighlight style={ [this.props.style, 
flexDirection:'row'}]} onPress={ ()=>{ 
this.props.controller.click(this.props.title); 
}}> 
<Text style={{textAlign:'center',flex:1, lignSelf: 
'center',color: 'white', fontSize:22}}>{this.props.title}</Text> 
</TouchableHighlight> 
) 汉 
}else{ 
return( 
<TouchableHighlight style={[this.props.style, 
flexDirection:'row'}]} onPress={ ()=>{ 
this.props.controller.click(this.props.title); 
his 
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<View style={{alignSelf:'center',flex:1}}> 
<Image style={{alignSelf:'center', idth:45, 
height:30}} source={require('../src/delete.png')}/> 
</View> 
</TouchableHighlight> 
); 
) 
} 
在 RootView 类 中 创建 键盘 按钮 时 ， 同 时 绑 定 控制 器 ， 代 码 如 下 : 
if (i==3) { 
element = (<NumButton controller={this.props.controller} key={i} 
style={ {flex:1,alignSelf:'stretch'}} title={titles[i]} 
source="../src/delete.png" model="image" />); 
}else if(i==12||i==15){ 
element = (<NumButton controller={this.props.controller} key={i} 
style={ {flex:1,alignSelf:'stretch',backgroundColor: 'rgb(234,86,37)'}} 
title={titles[i]} model="text" />); 
}elsef 
element = (<NumButton controller={this.props.controller} key={i} 
style={ {flex:1,alignSelf:'stretch'}} title={titles[i]} model="text" />); 
1 
在 RootViewController 中 实现 click 方法 : 
click=(title)=>{ 
if (title==="0"||title==="]1"||title==="2"||title==="3"|| 
11 
title==="5"| |title= "| ltitle==="8"| |title: | 





this .refs.rootView.inputNum(title) 
}else if(title==="'.'){ 
this.refs.rootView.inputDot (); 
}else if(title==='delete'){ 
this.refs.rootView.delete(); 
}else if(title==="C"){ 
this.refs.rootView.clear (); 
}else if(title==="+"){ 
this.refs.rootView.add(); 
}else if(title==="-"){ 
this.refs.rootView.sub(); 
}else if(title==="="){ 
this.refs.rootView.cal(); 











} 
在 RootView 类 中 实现 相关 方法 : 
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inputNum (num) { 
let str = this.state.dollar.slice(0,-1); 
if (this.isDollarToRMB) { 
this.setState({ 
dollar:Number (str+num)+"'$" 
Fs 
}else{ 
this.setState({ 
dollar:Number (str+num)+'¥" 


} 
clear(){ 
if (this.isDollarToRMB) { 
this .setState({ 
dollare De 
RMB:'0¥"' 
}); 
}elsef 
this.setSstatel({ 
dollar:'0¥', 
RMB:'0$"' 


} 
delete(){ 
let str = this.state.dollar.slice(0,-1); 
if (str.length===1) { 
if (this.isDollarToRMB) { 
this.setState({ 
dollar:'0$' 
}); 
}else{ 
this.setState({ 
dollar:"0¥” 
Ey 
} 
}else{ 
if (this.isDollarToRMB) { 
this.setstate({ 
dollar:str.substring(0, str.length-1)+'$"' 
En 
}elsef{ 
this.setState({ 
dollar:str.substring(0,str.length-1)+'¥" 
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} 
} 
h 
add() 1{ 
let str = this.state.dollar.slice(0,-1); 
if (this.isDollarToRMB) { 
this.setState({ 
dollar:Number (str)+1+'$" 
Sp 
}elsef{f 
this .setState({ 
dollar:Number (str)+1+'¥" 
]) 7 
} 
cal(){ 
let str = this.state.dollar.slice(0,-1); 
if (this.isDollarToRMB) { 
this.setState({ 
RMB: (Number (str)*6.7) .toFixed(2)+"¥" 
i 
}else{ 
this.setState({ 
RMB: (Number (str)/6.7) .toFixed(2)+"¥" 
}); 
} 
} 
sub(){ 





let str = this.state.dollar.slice(0,-1); 
if (str==="0") { 
return; 
} 
if (this.isDollarToRMB) { 
this.setState({ 
dollar:Number (str)-1+'$" 
DD); 
}else{ 
this.setState({ 


dollar:Number (str)-1+'¥" 
DD); 


} 
inputDot () { 
let str = this.state.dollar.slice(0,-1); 
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if (str.indexOf(".")!==-1) { 
return; 
} 
if (this.isDollarToRMB) { 
this.setState({ 
dollarsetri,.$" 
1D); 
}else{ 
this.setState({ 
dollarstr+"¥" 
]) 7 


} 


上 面 的 代码 都 是 基础 的 JavaScript 逻辑 实现 ， 理 解 起 来 并 没有 太 大 的 难度 。 至 此 ， 第 一 款 完整 
的 React Native 应 用 就 开发 完成 了 ， 把 它 展示 给 你 的 伙伴 们 吧 ! 


实战 项 目 : 微 信 热 门 精 选 


本 章 我 们 开始 编写 一 款 React Native 网 络 应 用 。 微 信和 是 现在 生活 中 一 个 很 火 的 社交 工具 ， 其 流 
行 原因 除了 用 户 可 以 方便 地 进行 社交 行为 外 ,还 有 强大 的 公众 号 和 原创 文章 可 以 为 用 户 提 供 各 种 各 
样 的 热门 资讯 。 本 童 我 们 就 调用 微 信 热 门 文章 的 接口 服务 来 开发 一 款 资讯 文章 推荐 阅读 器 。 


10.1 申请 免费 的 API 服务 


在 实际 工作 中 ，API 服务 一 般 会 有 专门 的 开发 人 员 负 责 ， 在 学 习 阶 段 , 我 们 可 以 借用 互联 网 上 
的 免费 API 服务 来 搭建 客户 端 项 目 。 天 行 数据 网 站 提供 了 许多 API 服务 ， 其 并 不 是 完全 免费 的 ， 
对 于 新 注册 的 用 户 ， 可 以 免费 试用 10000 次 的 请 求 ， 对 于 学 习 来 说 ， 这 已 经 足够 了 。 

访问 pa /lwww.tianapi.com/ 网 址 来 到 天 行 数据 网 站 的 首页 ， 如 图 10-1 所 示 。 





本 本 和 RE 流失。 间 动 中 心 。 痊愈 开 长 坦 个 人 中 心 。 百 页 





4 交 PHP， Ja 第 商 的 作 或 本 、 锡 和 检 安全 隐 人 的 系 闪 到 SAE 有 疾 示 动 ， 条 有 广 二 从 六 | 人 好 可 ) 外 要 全 1000 二 . 
4 下 和 交大 条 时 本名 入 创 用户， 每 二 元 每 天 “万 征求 ， 可 村 2 并 赤 更 允 两 用 时 和 服务 和 性- E> 


大仙 估 公 众 号 和 小 程序 培 入 方法 
微 信 公 众 平台 | 
setae eons Ete com emera mAen 一 刍 接 入 四 能 服务 


ng 





开导: 天 自己 并 医用 部 有 和 入 ,过 接 和 FL 上 URLIDcten ， 基 可 以 人 天 天生 生息 化 务 吉 - 





© ree 
开展 直人 入 公 从 于 台 小 程序 开 育种- 汪 各 和 基 名 (hepsieol tanaol oorm 】， 共和 参考 天 条 














和 全， 并 2590 和 有人 


图 10-1 天 行 数据 网 站 首页 
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若 要 使 用 网 站 提供 的 API 服务 ， 则 需要 申请 成 为 网 站 的 会 员 ， 首 先 单 击 首页 右上 角 的 “个 人 
中 心 ” 按 钮 ， 此 时 会 弹出 登录 注册 界面 ， 如 图 10-2 所 示 。 


请 先 注册 


昌 姓名 或 县 称 (2-8 个 汉字 或 4-16 位 字符 ) 


西 请 输入 您 的 Email (非常 重要 ， 需 要 验证 ) 
向 登录 密码 (不 少 于 8 位 ) 
全 请 输入 右边 的 验证 码 


确定 注册 


与 天 行 何 答 社区 及 微 信 端 账号 信息 同步 天 去 注 册 ? 





图 10-2 登录 注册 界面 
如 果 以 前 没有 注册 过 会 员 ， 就 需要 在 注册 界面 填写 相应 信息 来 进行 注册 ， 注 册 完 成 后 登录 
即 可 。 
登录 成 功 后 ， 你 可 能 会 看 到 如 图 10-3 所 示 的 界面 ， 这 是 因为 新 注册 的 账号 并 没有 完成 邮箱 验 
证 ， 只 有 完成 邮箱 验证 后 才能 使 用 API 服务 ， 单 击 “ 请 点 此 发 送 验证 链接 ”选项 ， 之 后 进入 邮箱 
进行 验证 即 可 。 (因为 需要 进行 邮箱 验证 ， 所 示 请 确保 注册 时 提供 的 邮箱 地 址 正确 。)》 


全 ”提示 : 由 于 您 的 Email 尚 未 验证 ，APIKEY 及 部 分 高 级 功能 被 暂时 隐 怠 ( 请 点 此 发 送 验证 链接 ) 





CE， 7 : 刷新 重 置 记录 应 用 退出 
APIKEY : c86led8f723ere enn 12b44187e3b5 复制 
微 信 调 用 : https:/lapitianapi.com/weixin/?key=c861ed8f723ewwwwoooooeere 12b441 复制 


功能 服务 : 微 信 设 置 主页 模板 开发 调试 数据 校 验 高 级 规则 网 友 案例 定制 服务 赞助 打 赏 
邮箱 验证 : 未完 成 验证 修改 

手机 验证 : 未 完成 验证 ( 验证 手机 后 调用 频率 为 360 次 /分 钟 ) 点 此 验证 

微 信 星 定 :未 完成 铸 定 ( 成 功 旷 定 后 可 增加 50000 次 请 求 量 ) 点 此 岩 定 

账号 状态 : 普通 帐号 ( 调用 频率 : 60 次 /分 钟 ) 获得 更 高 的 调用 频率 和 调用 数量 请 提升 等 级 
API 统计 : 0 次 〈 永久 剩余 ; 10000 ) 周 统计 表 小 程序 








图 10-3 为 邮箱 验证 的 账号 信息 


基于 互联 网 的 API 服务 都 不 能 保证 长 期 稳定 有 效 ， 如 果 你 在 学 习 本 书 时 发 现 示 例 的 API 已 
经 无 法 使 用 也 不 必 着 急 ， 按 照 书 中 提供 的 思路 再 寻找 其 他 可 用 服务 即 可 。 
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在 天 行 数据 网 站 上 找到 热门 精 选 API 栏目 ， 其 中 有 请 求 相关 参数 的 定义 ， 如 图 10-4 所 示 。 





车? 热门 精 选 API 
News 1 
请 求 方法 : HTTPIHTTPS GET JSON 返回 示例 。 代码 参考 。 错误 返回 码 国民 


数据 来 源 : 微 信 公众 平台 
接口 地 址 : http://api.tianapi.com/wxnew/?key=APIKEY&num=10 
使 用 帮助 : 央 认 返回 10 条 数据 ， 非 必 境 参数 请 按 需 传道. 

更 新 半期 ; 1 小 时 /次 ( 晚间 00.06 不 更 新 ) 


api.huceo.com 





请 求 参数 类 型 必须 参 至 (年 描述 备注 说 明 

key string 是 urlParam AP| 密 钥 ( 请 在 个 人 中 心 获 取 ) 用 户 自己 的 key 

num int 是 uriParam 指定 返回 数量 ， 最 大 50 10 

STC string 否 unParam 指定 来 源 为 某 微 信 公众 号 例如 : 人 民 日 报 

rand int 否 urlParam 参数 值 为 1 则 随机 获取 0 

Word string 否 urlParam 检索 关键 词 上 海 

page int 否 udParam 翻 页 ,每 页 输出 数量 跟随 num 参 数 1 , 着 指定 文章 来 源 则 必 带 此 参数 





图 10-4 请 求 参 数 定义 


其 中 ，key 是 最 重要 的 参数 ， 是 个 人 中 心 界面 中 分 配给 你 账号 的 api key 值 ; num 参数 设置 返 
的 数据 条 数 ，rand 参数 设置 是 否 是 随机 的 ; page 参数 用 来 进行 分 页 。 





回 


10.2 搭建 项 目 网 络 模块 


使 用 终端 在 指定 工作 目录 中 新 建 一 个 React Native 工程 ， 使 用 如 下 命令 : 


react-native init WXHot 


稍 等 片刻 ， 工 程 建立 完成 后 ,在 iOS 和 Android 平台 运行 ， 成 功 进入 欢迎 界面 ， 工 程 初始 化 完 
成 。 在 工程 中 新 建 一 个 命名 为 net 的 文件 夹 ， 在 其 中 创建 一 个 命名 为 NetTooljs 的 文件 ， 在 其 中 编 
写 如 下 代码 : 


import React, { Component } from 'react'; 
export default class NetTool { 
// 获 取 文章 数据 
getArticle=function (page,callback) { 
let url = "http://api.tianapi.com/wxnew/?key= 
ef7f04344615b7ff44a8b3aa78aa27f3&num=10&page="+page7 
fetch (url,{ 
method: 'GET', 
}) .then ( (response)=>{ 
return response.json(); 
}) .then( (data)=>{ 
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callback (data); 
ys 


} 
修改 index.iosjs 文件 如 下 ， 在 其 中 进行 请 求 的 测试 : 


import { 
AppRegistry, 
StyleSheet, 
Text, 
View 
} from 'react-native'; 
import NetTool from './net/NetTool'; 
export default class WXHot extends Component { 
constructor (props){ 
super (props); 
this.netTool = new NetTool (); 
了 
render() { 
return ( 
<View style={styles.container}> 
<Text style={styles.welcome} 
onPress={ ()=>{ 
this.netTool .getArticle(0, (data)=>{ 
console.log (data); 
} 
} 
}> 
Welcome to React Native! 
</Text> 
<Text style={styles.instructions}> 
To get started, edit index.ios.js 
</Text> 
<Text style={styles.instructions}> 
Press Cmd+R to reload,{'\n'} 
Cmd+D or shake for dev menu 
</Text> 
</View> 
) 7 


注意 ， 在 iOS 平台 要 访问 HTTP 接口 ， 需 要 修改 Info.plist 文件 ， 在 其 中 添加 如 图 10-5 所 示 的 
键 值 。 
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Key Type Value 
了 Information Property List Dictionary (17 items) 
Localization native development r.. ¢ String en 4 
Bundle display name 4 String WXHot 
Executable file 9 Stri S$(EXECUTABLE_NAME) 
Bundle identifier S$ Stri org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier) 
InfoDictionary version $ Stri 6.0 
Bundle name 人 _ Str S$(PRODUCT_NAME) 
Bundle OS Type code 人 str APPL 
Bundle versions string, short 3 Str 1.0 
Bundle creator OS Type code 4 String ?9299 
Bundle version $ String 1 
Application requires iPhone enviro.. ¢ Boolean YES 4 
Launch screen interface file base.. 4 String LaunchScreen 
¥ Required device capabilities 4 Array (1 item) 
基 Supported interface orientations 4 Aray (3 items) 
View controller-based status bar a... 人 NO 4 
Privacy - Location When In Use U.， 人 
了 App Transport Security Settings 4 
Allow Arbitrary Loads 4 区 
上 Exception Domains 4 
10-5 添加 支持 HTTP 请 求 的 字段 
在 iOS 平台 运行 工程 ， 打 开 调试 模式 ， 单 击 “Welcome to React Native”， 可 以 看 到 调试 区 打 


Tm 


0 出 请 求 到 的 数据 对 象 ， 如 图 10-6 所 示 。 





vnewslist: Array(19) 
Y 9: Object 
ctime; *2017-07-31" 
description: "入 之 被 广 " 
picUrl: "https://2xpic. gting, com/infonew/@/wechat_pics_~32792778. jpg/640" 
古装 剧 时 的 贱 容 级 画像 | 联 的 美人 怎么 成 了 这 样 ? 
https://mp. weixin,qq, Com/s?7src=166ver=2765t inestamp=15014736305signature=5sKzunDrBdXdbaH@aShpfuNIXPxsoLD6iSMXukmw2bB9SAkBIH2vSRgdhysEJLtu| 
* proto_: Object 
» 1: object ld 
» 2: Object 
* 3: Object 
* 4; Object 
* 5: Object 
» 6: Object 
* 7: Object 
» 8: Object 
* 9: Object 
tengthy 10 
» proto_; Array(9) 
»_proto_: Object 















图 10-6 请 求 结果 展示 


10.3 ”搭建 文章 列表 界面 


在 10.2 节 ， 我 们 完成 了 开发 前 的 准备 工作 ， 调 试 好 了 API 服务 ， 本 节 我 们 来 搭建 一 个 简单 的 
文章 列表 界面 。 

首先 在 工程 根 目录 中 新 建 一 个 命名 为 view 的 文件 夹 ， 其 中 用 来 存放 视图 相关 的 文件 ， 在 其 中 
新 建 一 个 命名 为 ArticleViewjjs 的 文件 ， 关 于 文章 列表 ， 我 们 可 以 采用 FlatlList 组 件 来 搭建 ， 实 现 
ArticleView.js 文件 : 
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import React, { Component } from 'react'; 
import { 
FlatList, 
StyleSheet, 
View, 
Text 
} from 'react-native'; 
export default class ArticleView extends Component{ 
constructor (props){ 
super (props); 
} 
render(){ 
let key = 0; 
this.props.data.forEach (function (item) { 
item.key = key++; 
Wn 
return( 
<FlatList 
data={this.props.data} 
renderItem={ ({item})=>{ 
return(<Text>{item.title}</Text>); 
ItemSeparatorComponent={ ()=>{ 
return(<View style={articleViewStyle.separatorLine}> 
</View>); 
}} 
/> 


let articleViewStyle = StyleSheet.create({ 
separatorLine:{ 
height:1, 
backgroundColor: 'gray', 
marginLeft:15 


Ds; 


注意 ，FlatList 在 加 载 的 时 候 需 要 每 一 个 数据 源 对 象 中 都 包含 一 个 key 属性 ， 由 于 接口 API 返 
回 的 数据 中 并 没有 属性 key, 因此 我 们 需要 在 每 次 获取 数据 刷新 后 将 所 有 数据 都 添加 一 个 key 属性 。 
修改 index.iosjs 与 index.android.js 文件 如 下 : 











import React, { Component } from 'react'; 
import { 

AppRegistry, 

StyleSheet, 
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Text, 
View 
} from 'react-native'; 
import NetTool from './net/NetTool'; 
import ArticleView from './view/ArticleView'; 
export default class WXHot extends Component { 
constructor (props){ 
super (props); 
this .netTool = new NetTool (); 
this.state={ 
data:new Array() 
i 
this.page = 1; 
this.getArticle(); 
} 
render() { 
return ( 
<View style={styles.container}> 
<View style={styles.navigation}></View> 
<ArticleView data={this.state.data}/> 
</View> 
); 
} 
getArticle(){ 
this.netTool .getArticle (this.page, (data)=>{ 
this.setState({ 
data:data.newslist, 
1); 
this.paget++; 
好 


} 
const styles = StyleSheet.create({ 


container: { 
flex: 1, 
backgroundColor: '#F5FCFF', 
jy 
navigation:{ 
height:64, 
backgroundColor: 'white"' 
} 


Ds; 
AppRegistry.registerComponent ('WXHot', () => WXHot); 


上 面 的 代码 中 ,我 们 先 留 下 一 个 64 个 单位 高 度 的 导航 栏 ， 后 面 章节 我 们 会 再 回来 单独 开发 导 
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航 栏 。 在 组 件 的 构造 方法 中 ,我 们 进行 了 一 次 网 络 数据 的 获取 ,每 次 数据 获取 后 ， 都 需要 将 标记 页 
码 的 属性 page 进行 自 增 ， 运 行 工程 ， 效 果 如 图 10-7 所 示 。 





图 10-7 文章 列表 界面 搭建 





10.4 ”文章 日 录 视 图 与 首页 导航 栏 完善 


在 工程 的 view 文件 夹 下 新 建 一 个 命名 为 Articleltem.js 的 文件 ， 将 其 作为 展现 文章 目录 的 视图 
组 件 。 当 用 户 单 击 某 个 列表 中 的 文章 时 ， 应 该 可 以 跳 转 到 文章 详情 页 ， 因 此 使 用 TouchableOpacity 
组 件 十 分 合适 。 本 节 将 完成 界面 部 分 的 完善 交互 逻辑 在 后 面 开 发 。 

在 ArticleItem.js 文件 中 编写 如 下 代码 : 





import React, { Component } from 'react'; 
import { 
StyleSheet, 
View, 
Text, 
Image, 
TouchableOpacity 
} from 'react-native'; 
export default class ArticleItem extends Component{ 
render (){ 
return( 
<TouchableOpacity> 
<View> 
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<Text style={itemStyle.titlestyle}> 
{this.props.data.description}</Text> 
<View style={itemStyle.contentView}> 
<Image source={{uri:this.props.data.picUrl}} 
style={itemStyle.imageStyle}/> 
<Text style={itemStyle.contentText}> 
{this.props.data.title}</Text> 
<Text></Text> 
</View> 


</View> 
</TouchableOpacity> 


1 
let itemStyle=StyleSheet .create({ 

imageStyle:{ 
width:80, 
height:120, 
marginLeft:15, 
marginTop:10, 
marginBottom:10 

}, 

titleStyle:{ 
marginTop:15, 
marginLeft:15, 
fontSize:17 

}, 

contentView:{ 
flex:1, 
flexDirection:'row' 

jy 

contentText:{ 
flex:1, 
fontSsize:15, 
marginTop:15, 
marginLeft:10, 
marginRight:15 





有 关 文 章 列表 所 需要 显示 的 数据 ， 我 们 采用 自 定义 属性 的 方式 来 获取 ， 修 改 ArticleView 文件 
如 下 : 


import React, { Component } from "react'"7 
import { 
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FlatList, 
StyleSheet, 
View, 
Text 
} from 'react-native'; 
import ArticleItem from './ArticleItem'; 
export default class ArticleView extends Component{ 
constructor (props){ 
super (props); 
直 
render (){ 
let key = 0; 
this.props.data.forEach (function (item) { 
item.key = key++; 
}); 
return( 
<FlatList 
data={this.props.data} 
renderItem={ ({item})=>{ 
return (<ArticleItem data={item} />); 
}} 
ItemSeparatorComponent={ ()=>{ 
return(<View style={articleViewStyle.separatorLine}> 
</View>); 
}} 
/> 


1 
let articleViewStyle = StyleSheet.create({ 
separatorLine:{ 
height:1, 
backgroundColor: 'gray', 
marginLeft:15 


Ds; 
将 index.iosjs 与 index.android.js 文件 中 的 render 方法 修改 如 下 ， 进 行 导 航 栏 的 完善 : 


render() { 
return ( 
<View style={styles.container}> 
<View style={styles.navigation}> 
<Text style={styles.titleStyle}> 微 信和 热门 推荐 </Text> 
</View> 
<ArticleView data={this.state.data}/> 
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</View> 
js 
1 


新 添加 的 样式 表 如 下 : 


const styles = StyleSheet.create({ 
container: { 
flexe Ls 
backgroundColor: '#F5FCFF', 
}, 
navigation:{ 
height:64, 
backgroundColor: "Purple' 
}， 
titlestyle:{ 
color: 'white', 
fontSize:22， 
justifyContent:'center', 
alignSelf:'center', 
lineHeight:60 


}) 7 
运行 工程 ， 效 果 如 图 10-8 所 示 ， 基 本 的 主页 界面 我 们 已 经 搭建 完成 。 
微 信 热 门 推荐 


健康 减肥 


ee 健身 重 塑 完美 的 自己 ! 


腾讯 网 


= 【 冬 姐 荐 歌 】 累 了 ， 烦 了 就 听 


有 人 都 在 用 力 奔跑 
有 你 受 尽 委屈 
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10.5 “文章 详情 页 面 的 开发 


文章 详情 页 面 其 实 十 分 简单 ， 它 就 是 一 个 WebView 组 件 ， 用 来 显示 一 个 网 页 ， 本 节 我 们 的 重 
点 是 使 用 导航 进行 页 面 的 跳 转 。 注意 ,在 React Native 0.44 版 本 后 ，Navigator 组 件 被 放 至 单独 的 模 
块 中 ,如 果 你 使 用 的 React Native 版 本 高 于 0.44， 就 需要 手动 来 安装 这 个 模块 ， 使 用 yarn 工具 在 项 
目 根 目 录 下 执行 如 下 命令 : 


yarn add react-native-deprecated-custom-components 
如 果 你 还 没有 安装 yarn 工具 ， 可 以 使 用 如 下 命令 安装 : 

npm install -g yarn react-native-cli 

安装 完 yarn 工具 后 ， 建 议 设置 一 下 国内 镜像 ， 执 行 命令 如 下 : 


yarn config set registry https://registry.npm.taobao.org --global 
yarn config set disturl https://npm.taobao.org/dist --global 


准备 完成 后 ， 在 项 目的 view 文件 夹 中 新 建 一 个 命名 为 ArticleDetailjs 的 文件 ， 用 来 展示 文章 
详情 页 ， 在 其 中 编写 如 下 代码 : 


import React, { Component } from 'react'; 
import { 
WebView 
} from 'react-native'; 
export default class ArticleDetail extends Component{ 
render (){ 
let uri = this.props.uri; 
return( 
<WebView source={{uri:uri}}/> 
); 


} 


上 面 的 代码 十 分 简单 ， 使 用 WebView 组 件 来 加 载 一 个 网 页 视图 。 当 用 户 单 击 某 个 文章 列表 中 
的 目录 时 ， 应 用 会 跳 转 到 具体 的 文章 详情 页 ， 因 此 ， 修 改 ArticleItem 类 的 render 方法 如 下 ， 使 其 
向 外 暴露 一 个 用 户 交 互 行为 的 接口 : 


render (){ 
return( 
<TouchableOpacity onPress={this.props.clickItem}> 
<View> 
<Text style={itemStyle.titlestyle}> 
{this.props.data.description}</Text> 
<View style={itemStyle.contentView}> 


第 10 章 实战 项 目 : 微 信 热门 精 选 | 327 





<Image source={{uri:this.props.data.picUrl}} 
style={itemStyle.imageStyle}/> 

<Text style={itemStyle.contentText}> 
{this.props.data.title}</Text> 

<Text></Text> 

</View> 
</View> 
</TouchableOpacity> 


下 
修改 ArticleView 类 的 render 方法 如 下 ， 添 加 设置 clickItem 属性 的 代码 : 


render (){ 
let key = 0; 
this.props.data.forEach (function (item)1{ 
item.key = key++; 
}) 7 


return( 
<FlatList 
data={this.props.data} 
renderItem={ ({item})=>{ 
return (<ArticleItem data={item} clickItem={ ()=>{ 
this.props.goDetails (item); 
1}1/>); 
上 
ItemSeparatorComponent={ ()=>{ 
return(<View style={articleViewStyle.separatorLine}> 
</View>); 
}} 
J 


} 


在 index.iosjs 与 index.androidjs 文件 中 修改 WXHot 类 的 render 方法 如 下 , 在 其 中 进行 导航 页 
面 的 控制 : 


render() { 
return ( 
<Navigator initialRoute={ {title:' 微 信和 热门 推荐 ', index:0}} 
renderScene={ (route,navigator)=>{ 
if (route.index==0) { 
return( 
<View style={styles.container}> 
<View style={styles.navigation}> 
<Text style={styles.titleStyle}>{route.title}</Text> 
</View> 
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<ArticleView data={this.state.data} goDetails={ (item)=>{ 
navigator.push({ 
title:item.description, 
index:route.index+1l， 
item:item 
]) 7 
/> 
</View> 
); 
}else{ 
return( 
<View style={styles.container}> 
<View style={styles.navigation}> 
<Text style={styles.detailTitle}>{route.title}</Text> 
<View style={styles.button}> 
<Button title=" 返 回 " onPress={ ()=>{ 
navigator.pop(); 
}} /> 
</View> 


</View> 
<ArticleDetail uri={route.item.url}/> 


</View> 


使 用 Navigator 实例 的 push 与 pop 方法 可 以 十 分 容易 地 进行 场景 的 切换 ,相关 样式 表 代码 如 下 : 


const styles = StyleSheet .create({ 
container: { 
flex;: 1, 
backgroundColor: '#F5FCFF', 
}, 
navigation:{ 
height:64, 
backgroundColor: 'purple', 
二 
titlestyle:{ 
color: 'white', 
fontSize:22, 
justifyContent:'center', 
alignSelf:'center', 
lineHeight:60 
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}, 

detailTitle:{ 
position:'absolute', 
color: 'white', 
fontSize:17, 
alignSelf:'center', 
lineHeight:60, 
textAlign:'center' 

}, 

button:{ 
position:'relative', 
width:60, 
height:30, 
marginTop:15, 
marginLeft:15, 

} 

Dy 


运行 工程 ， 微 信和 热门 推荐 应 用 就 基本 完成 了 ， 详 情 页 效果 如 图 10-9 所 示 ， 当 然 此 项 目 还 并 不 
完善 ， 还 有 下 拉 刷 新 和 上 拉 加 载 更 多 等 功能 需要 我 们 开发 ， 后 面 我 们 会 继续 进行 完善 。 





海南 岛 都 产 些 什么 宝贝 ， 文 
玩 人 必 看 


3 国 
2 全 时 ,自在 文 玩 人 
pe 


基 井 中 生 杂 文 卫 凤 起。 33 
| 


之 前 写 过 一 篇 《看 看 大 东 些 瞪 
宝 由 疾 姜 》 的 文章 ， 很 多 朋友 都 说 让 





图 10-9 文章 详情 页 
10.6 ”为 文章 列表 页 添加 下 拉 刷 新 与 上 拉 加 载 更 多 功能 


大 部 分 网 络 应 用 中 的 列表 页 都 有 下 拉 刷 新 和 上 拉 加 载 更 多 的 功能 ， 尤 其 是 一 些 实时 资讯 和 文章 
类 的 应 用 ,就 像 我 们 所 开发 的 这 款 微 信 热 门 文章 应 用 。FlatList 组 件 自 带 下 拉 刷 新 与 上 拉 加 载 的 功能 ， 
我 们 只 需要 设置 相关 属性 即 可 。 在 FlatList 中 ， 刷 新 组 件 的 显示 与 否 是 由 refreshing 属性 控制 的 ， 其 
是 一 个 受 控 的 属性 ， 因 此 我 们 需要 使 用 状态 来 控制 它 ， 修 改 ArticleView 类 的 构造 方法 如 下 : 
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constructor (props){ 
super (props); 
this.state={ 
isRefresh:false 


} 
修改 render 方法 如 下 : 


render (){ 
let key = 0; 
this.props.data.forEach (function (item){ 
item.key = key++; 
a 
return( 
<FlatList 
data={this.props.data} 
renderItem={ ({item})=>{ 


return(<ArticleItem data={item} clickItem={()=>{ 


this.props.goDetails (item); 


17/>); 
中 


ItemSeparatorComponent={ ()=>{ 


return (<View style={articleViewStyle.separatorLine}> 


</View>); 
}} 
onRefresh={ ()=>{ 
if (!this.state.isRefresh) { 
this.setState({ 
isRefresh:true 
1D); 
this.props.refresh(()=>{ 
this.setState({ 
isRefresh:false 


}} 
refreshing={this.state.isRefresh} 


onEndReached={ ()=>{ 
this.props.loadMore(); 
i 
7 
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FlatList 组 件 的 onEndReached 属性 用 来 设置 当 列表 滑动 到 接近 底部 时 调用 的 方法 ， 我 们 刚好 
可 以 使 用 这 个 属性 来 做 上 拉 加 载 更 多 的 需求 。 
修改 index.iosjs 文件 与 index.android.js 文件 中 的 ArticleView 组 件 如 下 : 


<ArticleView data={this.state.data} goDetails={ (item)=>{ 
navigator.push({ 
title:item.description, 
index:route.index+1l， 
item:item 
D1); 
}} 
refresh={ (callback)=>{ 
this.page=1; 
this.call = callback; 
this.getArticle(); 
}} 
loadMore={ ()=>{ 
this.getArticle(); 
1}/> 


前 面 我 们 并 没有 考虑 到 多 页 加 载 的 情况 ， 实 际 上 ， 每 次 加 载 新 的 一 页 后 ， 都 应 该 将 获取 到 的 
数据 拼接 到 原 有 数据 之 后 ， 除 此 之 外 ， 在 刷新 数据 时 ， 应 该 将 多 余 的 数据 清空 ， 修 改 getArticle 方 
法 如 下 : 

getArticle(){ 
this .netTool .getArticle (this.page, (data)=>{ 
let oldData = new Array(); 
if (this.page==1) { 





}else{ 
oldData = this.state.data; 

} 

this.setState({ 
data:oldData.concat (data.newslist) 

1D); 

this .page++7 

1f (this.cally ‘{ 
this.call(); 

1 

扩 
} 


运行 工程 ， 可 以 看 到 下 拉 刷 新 效果 与 上 拉 加 载 效果 。 到 此 ， 一 个 较为 完善 的 React Native 网 络 
应 用 就 开发 完成 了 ， 好 好 享受 它 吧 ! 


实战 项 目 : 掌上 新 闻 


通过 第 9 章 和 第 10 章 的 学 习 ， 相 信 你 对 React Native 应 用 开发 的 理解 一 定 更 深 了 一 步 ， 前 两 
章 的 实战 项 目 略 微 偏 简单 ， 从 本 章 开始 ， 我 们 将 一 起 完成 一 款 完善 的 React Native 商业 应 用 : 掌上 
新 闻 。 

本 章 我 们 依然 要 采用 天 行 数据 的 API 服务 来 获取 新 闻 资 讯 内 容 ， 你 在 上 一 章 申请 的 天 行 账号 
依然 可 以 继续 使 用 。 掌 上 新 闻 项 目 分 为 多 个 板块 , 每 个 板块 用 来 显示 一 类 新 闻 , 除了 新 闻 的 展示 外 ， 
我 们 还 需要 添加 一 些 更 易 用 的 功能 ， 例 如 用 户 感 兴趣 新 闻 的 收藏 。 


11.1 应 用 结构 搭建 





开始 开发 一 款 新 的 应 用 程序 , 尤其 是 React Native 应 用 程序 , 首先 要 做 的 便 是 界面 框架 的 搭建 。 
使 用 react-native init News 命令 新 建 一 个 React Native 工程 。 在 其 根 目 录 下 新 建 一 个 命名 为 View 的 
文件 夹 ， 用 来 存放 自 定义 的 视图 文件 。 在 View 文件 夹 中 新 建 4 个 JavaScript 文件 ， 分 别 命名 为 
MainView.js、NavigationBar.js、PageView.js、TitleBar.js。 其 中 ，MainView 为 应 用 程序 的 主 界面 ， 
NaviagationBar 为 可 复 用 的 导航 栏 ，PageView 是 核心 的 新 闻 展 示 页 ，TitleBar 为 分 类 标题 条 。 

导航 栏 作为 每 个 界面 顶部 的 视图 元 素 ， 往 往 用 来 展示 页 面 标题 ， 用 来 布局 一 些 功能 性 的 按钮 。 
在 NavigationBar.js 文件 中 简单 编写 如 下 代码 : 


import React, { Component } from 'react'; 





import { 
View, 
StyleSheet 
} from 'react-native'; 
export default class NavigationBar extends Component{ 
render (){ 
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return( 
<View style={naviStyles.bar}></View> 


let naviStyles = StyleSheet.create({ 
bar:{ 
height:64, 
backgroundColor: 'red' 


Ds; 
现在 我 们 只 需 编写 一 个 框架 ， 后 面 会 专门 对 导航 栏 进行 优化 与 完善 。 
在 PageView.js 文件 中 编写 如 下 代码 : 


import React, { Component } from 'react'; 
import { 
View, 
StyleSheet, 
ScrollView, 
Dimensions 
} from 'react-native'; 
export default class PageView extends Component{ 
render (){ 
var {height, width} = Dimensions.get ('window'); 
return( 
<ScrollView style={mainStyle.pageView} horizontal={true}> 
<View style={{backgroundColor:'red',width:width}}></View> 
<View style={{backgroundColor:'blue',width:width}}></View> 
</ScrollView> 


let mainStyle = StyleSheet.create({ 
pageView:{ 
backgroundColor: 'white"' 


这 里 我 们 使 用 到 了 前 边 学 习 过 的 SerollView 组 件 ， 用 来 展示 新 闻 分 类 组 合 页 ， 用 户 可 以 通过 
势 来 进行 新 闻 分 类 的 切换 。 
在 TitleBarjs 文件 中 编写 如 下 代码 : 


import React, { Component } from "react'"7 








滑动 





import { 
View, 
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StyleSheet, 
ScrollView, 
Text 
} from 'react-native'; 
export default class TitleBar extends Component{ 
render (){ 
return( 
<ScrollView style={titleBarStyles.bar} horizontal={true}> 
<Text style={titleBarStyles.text}> 时 政要 闻 </Text> 
<Text style={titleBarStyles.text}> 体 育 新 闻 </Text> 
<Text style={titleBarStyles .text}> 娱 乐 新 闻 </Text> 
<Text style={titleBarStyles.text} > 时 政要 闻 </Text> 
<Text style={titleBarStyles .text}> 体 育 新 闻 </Text> 
<Text style={titleBarStyles.text}> 娱 乐 新 闻 </Text> 
<Text style={titleBarStyles.text} > 时 政要 闻 </Text> 
<Text style={titleBarStyles.text}> 体 育 新 闻 </Text> 
<Text style={titleBarStyles.text}> 娱 乐 新 闻 </Text> 
</ScrollView> 


} 
let titleBarStyles = StyleSheet.create({ 
bar:{ 
backgroundColor: 'green', 
maxHeight:30 
}， 
text:{ 
height:30 


1); 
实现 了 各 个 子 组 件 的 框架 搭建 后 ， 需 要 在 MainViewjjs 文件 中 对 它们 进行 组 合 : 


import React, { Component } from 'react'; 
import { 

View, 

StyleSheet 
} from 'react-native'; 
import NavigationBar from './NavigationBar'; 
import TitleBar from './TitleBar'; 
import PageView from './PageView'; 
export default class MainView extends Component{ 

render () { 
return( 
<View style={{flex:1,backgroundColor: 'purple'}}> 
<NavigationBar /> 
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<TitleBar /> 
<PageView /> 
</View> 


) 
一 个 简易 的 项 目 框架 就 搭建 完成 了 ， 后 面 我 们 只 需要 分 步 完善 各 个 子 组 件 即 可 。 修 改 
index.iosjs 文件 与 index.androidjs 文件 中 的 render 方法 如 下 : 


render() { 
return ( 


<MainView /> 
) 7 
运行 工程 ， 完 成 的 效果 如 图 11-1 所 示 。 





图 11-1 应 用 界面 框架 搭建 


11.2 ”完善 标题 栏 组 件 


我 们 在 11.1 节 搭 建 了 一 个 简易 的 应 用 程序 框架 ， 无 论 是 界面 还 是 功能 ， 都 还 不 完善 ， 本 节 我 
们 将 对 标题 栏 组 件 进行 完善 。 首先 , 标题 栏 组 件 上 水 平 排列 一 组 新 闻 分 类 标题 ， 当 用 户 单 击 某 个 标 
题 时 ， 相 应 的 新 闻 会 呈现 给 用 户 。 在 设计 标题 栏 时 ， 我 们 应 该 考虑 这 样 几 个 问题 : 
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(1) 标题 栏 上 的 每 个 标题 都 是 独立 的 ， 可 以 接收 用 户 事件 ， 并 将 事件 传递 出 去 。 

(2) 当 用户 选 中 某 个 标题 时 ， 此 标题 应 该 有 UI 上 的 差异 ， 可 以 让 用 户 分 辨 出 当前 所 选中 的 
栏目 。 

(3) 当 用 户 选中 某 个 标题 时 ， 标 题 栏 应 该 滚动 到 用 户 舒 适 的 位 置 。 


除了 上 面 所 列举 的 功能 需求 外 ， 在 编写 代码 时 ， 我 们 还 需要 考虑 代码 的 复 用 性 。 实 现 TitleBar 
类 的 构造 方法 如 下 : 


constructor (props){ 

super (props); 

// 标 题 数 组 

this.dataArray = [ 
"社会 新 闻 ", "国内 新 闻 ", "国际 新 闻 ", "娱乐 要 闻 ", "体育 新 闻 "， 
"NBA 新 闻 ", "足球 要 闻 ", "科技 新 闻 ", "创业 新 闻 ", "苹果 新 闻 "， 
"军事 新 闻 ", "移动 互联 ", "旅游 资讯 ", "健康 知识 ", "奇闻 异 事 "， 
"美女 图 片 "， "VR 科技 ", "IT 资讯 " 

I 

// 用 来 标题 用 户 选 中 的 标题 

let selecteds = new Array(); 

for (let i=0;i<this.dataArray.length;i++){ 
if (i===0) { 

selecteds.push("rgb(0,0,0)"); 
}elsef{ 
selecteds .push ("rgb(111,111,111)"); 

有 

} 

this.state={ 
selected:selecteds, 

}; 

this.selectedIndex = 0; 

} 


在 TitleBar 类 中 实现 一 个 命名 为 createTips 的 方法 ， 这 个 方法 用 来 动态 创建 标题 栏 上 的 标题 按 
钮 ， 代 码 如 下 : 


createTips (){ 
let tipsArray = new Array(); 
for (var i = 0; i < this.dataArray.length; i++) { 
// 这 里 的 index 必须 使 用 let 声明 ，var 会 产生 变量 提升 
let index = i; 
let element = (<Text 
onPress={ ()=>{ 
let selecteds = new Array(); 
for (let i=0;i<this.dataArray.length;i++){ 
41f£ (i===index) { 
selecteds.push ("rgb (0,0,0)"); 
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}else{ 
selecteds.push ("rgb(111,111,111)"); 


下 
this.selectedIndex = index7 
this.setState({ 
selected:selecteds 
IJ 
if (index<this.dataArray.length-4) { 


this.refs.scrollView.scrollTo({x:75*index, 
animated:true}); 


}elsef 


this.refs.scrollView.scrollToEnd({animated: true}); 


上 
key={index} style={[titleBarStyles.text, 
{color:this.state.selected[index]}]}>{this.dataArray[i]}</Text>); 
tipsArray.push (element); 
3. 
return tipsArray; 


} 


createTips 方法 中 有 几 个 点 需要 读者 格外 注意 ， 首 先 Text 组 件 onPress 方法 的 实现 实际 上 应 用 
了 闭 包 ， 其 中 需要 使 用 到 当前 标题 在 数组 中 的 下 标 index， 在 声明 index 时 ， 读 者 务必 使 用 let 关键 
字 ， 如 果 这 里 使 用 了 var 关键 字 ， 则 会 产生 变量 提升 ， 闭 包 中 的 index 将 始终 等 于 循环 变量 i 最 终 
的 值 ， 而 不 是 我 们 所 期 望 的 下 标 值 。 

修改 TitleBar 类 的 render 方法 如 下 : 





render (){ 
return( 
<ScrollView style={titleBarStyles.bar} horizontal={true} 
showsHorizontalScrollIndicator={false} ref={"scrollView"}> 
{this.createTips ()} 
</ScrollView> 
Dh 
} 
修改 样式 表 如 下 : 
let titleBarStyles = StyleSheet.createl({ 
barsd 
maxHeight:30, 
backgroundColor: 'rgb (222,222,222) 


}, 
text:{ 
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height:30, 
marginLeft:10, 
marginRight:10, 
lineHeight:28, 
color:"rgb({111; 111; 111)" 
ys 
]) 


通过 上 面 的 完善 ， 标 题 栏 的 功能 更 加 充实 ， 运 行 工程 ， 效 果 如 图 11-2 所 示 。 


Phone SE -OS T02714C85) 





11-2 ”经 过 优化 后 的 标题 栏 


11.3 ”进行 网 络 模块 的 开发 


界面 上 演 染 的 新 闻 资讯 数据 全 部 来 自 网 络 ， 因 此 我 们 需要 封装 一 个 可 复 用 的 网 络 模块 ， 在 工 
程 的 根 目 录 下 新 建 一 个 命名 为 Net 的 文件 夹 ， 在 其 中 新 建 一 个 命名 为 NetTooljs 的 文件 ， 编 写 如 下 
代码 : 


export default class NetTool { 
constructor(){ 
this.apis = ["https://api.tianapi.com/social/? key= 您 的 appkey 
&num=20&page=", 

"https://api.tianapi.com/guonei/? key= 您 的 appkey &num=20&page=", 
"https://api.tianapi.com/world/? key= 您 的 appkey &num=20&page=", 
"https://api.tianapi.com/huabian/? key= 您 的 appkey &num=20&page=", 
"https://api.tianapi.com/tiyu/? key= 您 的 appkey &num=20&page=", 
"https://api.tianapi.com/football/? key= 您 的 appkey &num=20&page=", 
"https://api.tianapi.com/nba/? key= 您 的 appkey snum=20&page="， 
"https://api.tianapi.com/keji/? key= 您 的 appkey &num=20&page=", 
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"https://api.tianapi.com/startup/? key= 您 的 appkey &num=20&gpage="， 
"https://api.tianapi.com/apple/? key= 您 的 appkey &num=20&page=", 
"https://api.tianapi.com/military/?key= 您 的 appkey&num=20&page=", 
"https://api.tianapi.com/mobile/? key= 您 的 appkey &num=20&page=", 
"https://api.tianapi.com/travel/? key= 您 的 appkey &num=20&gpage=", 
"https://api.tianapi.com/health/? key= 您 的 appkey &num=20&page=", 





"https://api.tianapi.com/qiwen/? key= 您 的 appkey &num=20&page= 
"https://api.tianapi.com/meinv/? key= 您 的 appkey &num=20&page= 
"https://api.tianapi.com/vr/?key= 您 的 appkey snum=20&page="， 





"https://api.tianapi.com/it/?key= 您 的 appkey&num=20&page=" 
jn 
1 
getNewsData (tyPevPagevcallback){ 
let url = this.apis[type]l+page7 
fetch (url,{ 
method:'GET'}) .then( (response)=>{ 
return response.json(); 
}) .then( (data)=>{ 
callback (data); 
}) 


} 


由 于 每 一 个 界面 都 对 应 一 个 网 络 请 求 ， 因 此 我 们 可 以 在 构造 方法 中 将 请 求 地 址 组 合成 数组 。 
需要 注意 ,其 中 的 参数 key 要 换 成 读者 自己 在 天 行 数据 网 站 上 注册 得 到 的 AppKey 值 。 通过 如 下 方 
式 调 用 getNewsData 方法 , 可 以 打开 调试 模式 , 观察 调试 区 的 打印 数据 来 确认 接口 的 调用 是 否 畅通 。 

let tool = new NetTool (); 
tool.getNewsData(14,1，(data)=>{ 


console.log(data); 
]) 7 


11.4 “使 用 列表 展示 数据 


在 11.3 节 中 ， 我 们 已 经 可 以 从 互联 网 上 获取 需要 的 数据 。 将 数据 展示 在 对 应 的 分 类 模块 下 ， 
可 以 使 用 FlatList 组 件 。 在 PageView.js 文件 中 导入 FlatList 组 件 以 及 用 来 测试 效果 的 Text 组 件 ， 
代码 如 下 : 


import { 
View, 
StyleSheet, 
ScrollView, 
Dimensions, 
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FlatList, 
Text 
} from 'react-native'; 


在 PageView 类 中 实现 一 个 创建 列表 的 方法 和 请 求 数据 的 方法 ， 代 码 如 下 : 


contentView (width){ 
let views = new Array(); 
for (let i=0;i<this.netTool.apis.length;i++){ 
let element = (<FlatList key={i} style={{width:width}} 
data={this.state.dataArray[i]} 
renderItem={ ({item})=>{ 
return(<Text>{item.title}</Text>); 
Fy 
/>); 
views.push (element); 
} 
return views; 
} 
getData (index,page){ 
this.netTool .getNewsData (index,page, (data)=>{ 
let list = data.newslist; 
let i = 0; 
list.forEach( (item)=>{ 
item.key = i++; 
By 
let array = this.state.dataArray; 
array[index] = list; 
this.setState({ 
dataArray:array 


Eo 
} 


修改 PageView 类 的 render 方法 ， 代 码 如 下 : 


render (){ 
var {height, width} = Dimensions.get('window'); 
return( 
<ScrollView pagingEnabled={true} 
showsHorizontalScrollIndicator={false} 
style={mainStyle.pageView} horizontal={true}> 
{this.contentView (width)} 
</ScrollView> 
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上 面 的 代码 中 ， 我 们 先 采 用 Text 组 件 来 显示 新 闻 资 讯 的 标题 ， 再 完善 具体 的 目录 页 ， 
程 ， 左 右 滑动 可 以 看 到 每 个 模块 都 请 求 到 了 正确 的 数据 ， 效 果 如 图 11-3 所 示 。 





娱乐 要 闻 全 os 闻 。 足球 要 闻 


Ss 际 模 曲 的 化 身 足 球 宝贝 拍 写真 大 长 一 吸 晴 迷 人 
[由 轴 所 又 清纯 的 白衣 美女 





图 11-3 ”使 用 列表 展示 数据 
11.5 ”完善 新 闻 上 日 录 列 表 


完善 目录 列表 对 读者 来 说 应 该 不 在 话 下 ， 天 行 数据 提供 的 API 服务 的 接口 结构 都 类 似 ， 
可 以 仿照 前 面 微 信 热门 文章 实战 一 章 中 的 列表 进行 搭建 ， 也 可 以 自行 设计 。 


需要 注意 ， 虽 然 天 行 数据 提供 的 接口 是 支持 HTTP 请 求 的 ， 但 是 数据 中 的 图 片 链接 很 多 依 
然 是 HTTP 协议 的 ， 对 于 iOS 平台 ， 读 者 可 以 通过 向 info.plist 文件 中 添加 支持 HTTP 请 求 
键 值 的 方式 来 兼容 ， 如 图 11-4 所 示 。 


Allow Arbitrary Loads 
b> Exception Domains 





图 11-4 兼容 HTTP 协议 的 请 求 


在 工程 的 View 文件 夹 下 新 建 一 个 命名 为 temViewjs 的 文件 ， 在 其 中 编写 如 下 代码 : 


import React, { Component } from 'react'; 
import { 
View, 
StyleSheet, 
Text, 
Image 
} from 'react-native'; 
export default class ItemView extends Component{ 


运行 工 


读者 
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Frender (){ 
if (this.props.item.picUrl.length>0) { 
return( 
<View> 
<Text style={itemStyles.title}> 
{this.props.item.description}</Text> 
<View style={itemStyles.contentView}> 
<Image style={itemStyles.image} source= 
{{uri:this.props.item.picUrl}}/> 
<Text style={itemStyles.subTitle}> 
{this.props.item.title}</Text> 
</View> 
<Text style={itemStyles.time}> {this.props.item.ctime} 


</Text> 
<View style={itemStyles.line}></View> 
</View> 
) 
}elsef{f 
return( 
<View> 
<Text style={itemStyles.title}> {this.props.item.description} 
</Text> 
<Text style={itemStyles.detail}>{this.props.item.title} 
</Text> 
<Text style={itemStyles.time}> {this.props.item.ctime} 
</Text> 


<View style={itemStyles.line}></View> 
</View> 
); 
} 


} 
let itemStyles = StyleSheet.create({ 
image:{ 
width:80, 
height:120, 
marginLeft:15, 
marginTop:5 
}, 
title:{ 
fontSsize:15, 
marginLeft:15, 
marginTop:10 
}, 
contentView:{ 
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flexDirection:'row', 
}, 
subTitle:{ 
marginTop:5, 
marginRight:15, 
marginLeft:5, 
flexsiy 
fontSize:13, 
coLor "rgD(llllr LT 
}, 
detail:{ 
tlexs1 
marginTop:10, 
marginLeft:15, 
fontSize:13, 
marginRight:15, 
color: 'rgb (111,111,111)" 
}, 
time:{ 
alignSelf:'flex-end', 
marginRight:15 
}, 
line:{ 
backgroundColor: 'rgb (233,233,233)', 
marginLeft:15, 
height:1, 
marginTop:5 


1D); 
最 后 ， 不 要 忘 了 修改 PageView 类 中 的 contentView 方法 : 


contentView(width){ 
let views = new Array(); 
forl(let i=0;i<this.netTool.apis.length;i++){ 
let element = (<FlatList key={i} style={{width:width}} 
data={this.state.dataArray[i]} 
renderItem={ ({item})=>{ 
return (<ItemView item={item} />); 
a 
/>) 7 
views.push (element) 7 
} 


return views; 
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上 面 的 代码 根据 数据 中 有 无 图 片 提 供 了 两 种 演 染 方式 。 注意， 由 于 互联 网 数据 具有 不 稳定 性 ， 
因此 新 闻 数 据 并 不 一 定 有 效 ， 读 者 如 果 遇 到 问题 ， 无 须 纠结 。 
运行 工程 ， 效 果 如 图 11-5 所 示 。 





社会 新 闻 。 国内 新 闻 。 国际 新 闻 。 娱乐 要 闻 


搜狐 社会 


2017-06-07 10:12 


带 你 看 这 平 果 WWDC 


2017-06-06 06:19 





2017-06-06 07:41 





| 国 115 新 闻 列表 界面 
11.6 “标题 栏 与 页 面 联动 开发 与 优化 加 载 逻 辑 


到 11.5 节 为 止 ， 掌 上 新 闻 应 用 程序 首页 的 核心 元 素 都 已 经 开发 完成 ， 但 是 它们 之 间 依 然 是 独 
立 的 ， 也 就 是 说 ， 当 用 户 选中 标题 栏 上 某 个 栏目 后 ， 列 表 界 面 并 没有 滚动 到 相应 的 分 类 模块 ， 到 用 
户 手动 滚动 到 某 个 新 闻 模 块 时 ， 标 题 栏 上 的 选中 标题 也 没有 同步 修改 。 

首先 将 TitleBar 类 中 的 createTips 方法 修改 如 下 ， 将 其 中 关于 标题 选择 的 逻辑 抽 离 出 来 : 


createTips (){ 
let tipsArray = new Array(); 
for (var i = 0; i < this.dataArray.length; i++) { 
// 这 里 的 index 必须 使 用 let 声明 ，var 会 产生 变量 提升 
let index = i; 
let element = (<Text 
onPress={ ()=>{ 
this.selected (index); 
if (index<this.dataArray.length-4) { 
this.refs.scrollView.scrollTo({x:75*index, 
animated:true}); 
}elsef{ 
this.refs.scrollView.scrollToEnd ({animated: true}); 
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} 
// 进 行 联动 
this.props.click (index); 
BE 
key={index} style={[titleBarStyles.text, 
{color:this.state.selected[index]}]}>{this.dataArray[i]}</Text>); 
tipsArray.push (element); 
} 
return tipsArray; 


实现 selected 方法 如 下 : 


selected (index){ 
let selecteds = new Array(); 
forl(let i=0;i<this.dataArray.length;i++){ 
EE index) { 
selecteds.push ("rgb(0,0,0)"); 
}elsef{ 
selecteds.push("rgb(111,111,111)"); 









! 
this.selectedIndex = index; 
this.setState({ 
selected:selecteds 
}) 7 
if (index<this.dataArray.length-4) { 
this.refs.scrollView.scrollTo({x:75*index,animated:true}); 
}else{ 
this.refs.scrollView.scrollToEnd({animated: true}); 


} 
在 MainView 类 中 进行 TitleBar 与 PageView 的 逻辑 关联 : 


export default class MainView extends Component{ 
render () { 
return( 

<View style={{flex:1}}> 
<NavigationBar /> 
<TitleBar click={this.clickTitle} ref="titleBar"/> 
<PageView ref='pageView' scrollEnd={this.scrollEnd}/> 

</View> 


1 
clickTitle=(index)=>{ 
this.refs.pageView.show (index); 
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} 
scrollEnd = (index)=>{ 
this.refs.titleBar.selected (index); 


} 


需要 特别 注意 ， 上 面 的 clickTitle 函数 与 scrollEnd 函数 必须 以 第 头 函数 的 方式 创建 ， 这 样 其 中 
的 this 才能 指向 MainView 实例 。 
在 PageView 类 中 修改 render 方法 并 添加 show 方法 : 


render (){ 
Var {height, width} = Dimensions.get('window'); 
return( 
<ScrollView pagingEnabled={true} 
showsHorizontalScrollIndicator={false} style= 
{mainSstyle.pageView} horizontal={true} ref={'scrollView'} 
onMomentumScrollEnd={ (param)=>{ 
let index = param.nativeEvent.contentOffset.x/width; 
this.props.scrollEnd (index); 
法 
2 
{this.contentView (width)} 
</ScrollView> 
Ey 
} 
show (index) { 
var {height, width} = Dimensions.get('window'); 
this.refs.scrollView.scrollTo({x:index*width,animated:true}); 
} 


show 方法 很 好 理解 ， 其 根据 用 户 选 中 的 标题 栏 index 来 操作 当前 的 scrollView 滚动 到 合适 的 
位 置 , ScrollView 组 件 的 onMomentumScrollEnd 会 在 滚动 动画 结束 后 被 调用 ， 从 这 个 回调 方法 的 参 
数 中 可 以 获取 到 当前 ScrollView 组 件 滚 动 到 的 位 置 ， 通 过 它 我 们 可 以 进行 标题 栏 的 联动 。 

我 们 前 面 在 填充 界面 数据 时 ， 一 次 将 所 有 栏目 的 数据 全 部 进行 了 请 求 和 演 染 ， 这 样 做 是 十 分 
愚蠢 的 ， 首 先 同 时 发 送 大 量 的 请 求 是 很 费时 间 的 ， 其 次 当 请 求 返回 后 ， 同 时 演 染 所 有 栏目 界面 又 是 
非常 耗 性 能 的 ， 在 极端 情况 下 可 能 会 造成 界面 假死 的 现象 。 正 确 的 做 法 是 在 应 用 程序 启动 时 ， 请 求 
和 下 载 第 一 个 栏目 的 数据 即 可 ， 后 面 当 用 户 浏览 到 某 个 栏目 时 再 相应 地 加 载 数据 。 修 改 PageView 
类 的 构造 方法 ， 去 掉 循环 加 载 逻辑 : 

constructor (props){ 
super (props); 
this.netTool = new NetTool(); 
let dataArray = new Array(); 
for (let i = 0; i < this.netTool.apis.length; i++) { 
dataArray.push([]); 
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和 
this.state={ 
dataArray:dataArray 
和 
this.getData(0,1); 
} 


在 render 方法 中 加 入 请 求 当前 页 数据 的 逻辑 : 


render (){ 
var {height, width} = Dimensions.get('window'); 
return ( 
<ScrollView pagingEnabled={true} 
showsHorizontalScrollIndicator={false} 
style={mainStyle.pageView} horizontal={true} ref={'scrollView'} 
onMomentumScrollEnd={ (param)=>{ 
let index = param.nativeEvent.contentOffset.x/width; 
this.props.scrollEnd (index); 
if (this.state.dataArray[index] .length==0) { 
this.getData (index,1); 


{this.contentView (width)} 
</ScrollView> 


} 
注意 ，onMomentumScrollEnd 回调 在 iOS 平台 上 无 论 是 用 户 手动 滑动 ScrollView 还 是 开发 者 
通过 代码 来 滑动 ScrollView 都 会 被 触发 , 但 是 在 Android 平台 上 只 有 用 户 的 滑动 行为 会 触发 , 因此 
针对 Android 平台 ， 还 需要 修改 show 方法 : 
show (index) { 
var {height, width} = Dimensions.get ('window'); 
this.refs.scrollView.scrollTo({x:index*width,animated:true}); 
if (Platform.0S === 'android') { 
if (this.state.dataArray[index] .length==0) { 
this.getData (index,1); 


Platform 是 React Native 中 用 来 分 区 平台 的 对 象 ， 不 
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11.7 ”使 用 导航 进行 页 面 跳 转 


新 闻 资 讯 的 详情 页 可 以 直接 采用 WebView 来 设计 ， 页 面 的 跳 转 我 们 依然 使 用 Navigator 组 件 
来 实现 ， 首 先 需 要 在 工程 中 安装 Navigator 组 件 ， 在 工程 根 目录 中 执行 如 下 命名 : 


yarn add react-native-deprecated-custom-components 


将 ItemView 实现 成 可 以 接收 用 户 交互 的 组 件 ， 在 其 中 引入 TouchableOpacity 组 件 : 


import { 
View, 
StyleSheet, 
Texty 
Imagey 
TouchableOpacity 
} from 'react-native'; 


修改 render 方法 : 


render (){ 
if (this.props.item.picUrl.length>0) { 
return( 
<TouchableOpacity onPress={this.props.itemClick}> 
<View> 
<Text style={itemStyles.title}> {this.props.item.description} 
</Text> 
<View style={itemStyles.contentView}> 
<Image style={itemStyles.image} source= 
{{uri:this.props.item.picUrl}}/> 
<Text style={itemStyles.subTitle}> 
{this.props.item.title}</Text> 
</View> 
<Text style={itemStyles.time}> {this.props.item.ctime} 
</Text> 
<View style={itemStyles.line}></View> 
</View> 
</TouchableOpacity> 
je 
}else{ 
return( 
<TouchableOpacity onPress={this.props.itemClick}> 
<View> 


<Text style={itemStyles.title}>{this.props.item.description} 
</Text> 
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<Text style={itemStyles.detail}>{this.props.item.title} 


</Text> 
<Text style={itemStyles.time}>{this.props.item.ctime} 
</Text> 
<View style={itemStyles.line}></View> 
</View> 
</TouchableOpacity> 


修改 PageView 类 的 contentView 方法 : 


contentView (width){ 
let views = new Array(); 
forl(let i=0;i<this.netTool.apis.length;i++){ 
let element = (<FlatList key={i} style={{width:width}} 
data={this.state.dataArray[i]} 
renderItem={ ({item})=>{ 
return(<ItemView item={item} itemClick={()=>{ 
this.props.goDetail (item); 
}1/>); 
}} 
/>); 
Views.push (element); 
} 
return views; 


人 
在 MainView 中 引入 Navigator 组 件 : 


import { Navigator } from 'react-native-deprecated-custom-components'; 


将 MainView 类 的 实现 修改 如 下 : 


export default class MainView extends Component{ 
render () { 
return( 
<Navigator ref='navigation' initialRoute={{title:' 掌 上 新 闻 '， 
type:'root'}} renderScene={ (route,navigator)=>{ 
if (route.type === "root') { 
return( 
<View style={{flex:1}}> 
<NavigationBar /> 
<TitleBar click={this.clickTitle} 
ref="titleBar"/> 
<PageView ref='pageView' scrollEnd= 
{this.scrollEnd} goDetail={ (item)=>{ 
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navigator.push(f 
title:item.description, 
type: 'detail', 
uri:item.url 
a 
PF/ 
</View> 
); 
}else if(route.type==='detail'){ 
return( 
<View style={{flex:1}}> 
<NavigationBar /> 
<DetailPage uri={route.uri}/> 
</View> 
); 


}} 
/> 
Jj 
} 
clickTitle=(index)=>{ 
this.refs.navigation.refs.pageView.show (index); 
} 
scrollEnd = (index)=>{ 
this.refs.navigation.refs.titleBar.selected (index); 


} 
在 上 面 的 代码 中 ， 我 们 使 用 路 由 类 型 来 进行 页 面 跳 转 的 控制 。 





注意 ， 对 于 ref 的 引用 ,我 


们 需要 借助 Navigator 实例 进行 传递 。 下 面 在 view 文件 夹 下 新 建 一 个 DetailPagejs 文件 ， 实 现代 码 
如 下 : 


import React, { Component } from 'react'; 
import { 
WebView 
} from 'react-native'; 
export default class DetailPage extends Component{ 
render () { 
let uri = this.props.uri; 
return( 
<WebView source={ {uri:uri}}/> 
) 7 


1 
运行 工程 ， 单 击 目录 中 的 某 个 新 闻 会 跳 转 到 相应 的 详情 页 。 
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11.8 ”完善 下 拉 刷 新 与 上 拉 加 载 更 多 功能 





掌上 新 闻 应 用 的 下 拉 刷 新 和 上 拉 加 载 功能 的 开发 方法 与 微 信 热门 文章 相似 。 不 同 的 是 ， 掌 上 
新 闻 应 用 更 加 复杂 一 些 ， 新 闻 类 目 较 多 ,在 进行 刷新 和 加 载 功 能 开发 时 ， 我 们 要 注意 找 准 执行 功能 
的 界面 。 

首先 修改 PageView 类 的 构造 方法 : 


constructor (props){ 
super (props); 
this.netTool = new NetTool(); 
let dataArray = new Array(); 
let refreshArray = new Array(); 
for (let i = 0; i < this.netTool.apis.length; i++) { 
dataArray.push([]); 
refreshArray.push({refreshing:false,page:1}); 
| 
this.state={ 
dataArray:dataArray, 
refreshArray:refreshArray 
} 
this.hasLoad = false; 
this.getData(0,1); 
} 


上 面 的 代码 向 PageView 类 的 状态 中 添加 了 一 个 refreshArray 数组 ， 这 个 数组 中 的 对 象 用 来 控 
制 刷新 状态 以 及 加 载 的 分 页 数 。hasLoad 属性 用 来 标记 当前 是 否 正在 进行 数据 请 求 ， 这 样 做 的 目的 
是 为 了 防止 重复 请 求 。 

修改 PageView 类 的 contentView 方法 : 


contentView (width) { 
let views = new Array(); 
for (let i=0;i<this.netTool .apis.length;i++){ 
let element = (<FlatList key={i} style={{width:width}} 
data={this.state.dataArray[i]} 
renderItem={ ({item})=>{ 
return(<ItemView item={item} itemClick={ ()=>{ 
this.props.goDetail (item); 
}}/>) 7 
}} 
refreshing={this.state.refreshArray[il].refreshing} 
onRefresh={ ()=>{ 
if (this.hasLoad) { 
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return; 
上 
this.state.refreshArray[i] .page=1; 
this.state.refreshArray[il] .refreshing=true; 
this.setState({ 
refreshArray:this.state.refreshArray, 
dataArray:this.state.dataArray 
3 
this.getData (i,1); 
}} 
onEndReached={ ()=>{ 
this.state.refreshArray[i] .page+=1; 
this.getData(i,this.state.refreshArray[il] .page); 
}} 
onEndReachedThreshold={0.5}/>); 
Views.push (element); 
} 
return views; 


} 
修改 获取 数据 的 方法 getData: 


getData (index,page){ 
if(this.hasLoad){ 
return; 
} 
this.hasLoad = true; 
this.netTool .getNewsData (index,page, (data)=>{ 
let list = data.newslist; 
let array = this.state.dataArray; 
let i = 20* (page-1); 
It ILSt) 
list.forEach( (item)=>{ 
item.key = i++; 
]) 
} 
if (page==1) { 
array[index] = list; 
}else{ 
array[index] 


array[index] .concat (list); 
} 
this.state.refreshArray[index] .refreshing=false; 
this .setState({ 
dataArray:array, 
refreshArray:this.state.refreshArray 
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i 
this.hasLoad = false; 
| 


运行 工程 ， 刷 新 和 加 载 功能 就 开发 完成 了 。 注 意 ， 代 码 let i = 20*(page-1) 中 的 20 需要 与 接口 
数据 的 返回 数据 条 数 保持 一 致 , 这 是 因为 我 们 在 写 接口 时 将 控制 数据 返回 数量 的 参数 设 定 为 了 20。 


11.9 “完善 导航 栏 


导航 栏 的 作用 除了 用 来 显示 当前 界面 的 标题 外 ， 往 往 还 会 布局 一 些 功能 按钮 ， 例 如 在 详情 页 
需要 有 返回 按钮 、 与 掌上 新 闻 应 用 的 收藏 相关 的 功能 按钮 。 

按照 我 们 的 设计 ， 在 首页 用 户 就 可 以 跳 转 到 收藏 夹 页 面 进行 往 期 收藏 的 浏览 ， 在 新 闻 详 情 页 
面 可 以 进行 当前 新 闻 的 收藏 。 在 NavagationBar.js 文件 中 编写 如 下 代码 : 


import React, { Component } from 'react'; 
import { 
View, 
StyleSheet, 
Text, 
TouchableOpacity 
} from 'react-native'; 
export default class NavigationBar extends Component{ 
render (){ 
if (this.props.type === 'root') { 
return( 
<View style={naviStyles.bar}> 
<View style={naviStyles.textView}> 
<Text style={naviStyles.text}> 
{this.props.title} 
</Text> 
</View> 
<TouchableOpacity style={naviStyles.rightButton}> 
<Text> 收 藏 夹 </Text> 
</TouchableOpacity> 
</View> 
yn 
}else if(this.props.type === "detail'){ 
return( 
<View style={naviStyles.bar}> 
<View style={naviStyles.textView}> 
<Text style={naviStyles.text}> 
{this.props.title} 
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</Text> 


</View> 
<TouchableOpacity onPress={this.props.pop} 


style={naviStyles.leftButton}> 


<Text> 返 回 </Text> 
</TouchableOpacity> 
<TouchableOpacity style={naviStyles.rightButton}> 
<Text> 添 加 收藏 </Text> 
</TouchableOpacity> 
</View> 
Dz 
}else if(this.props.tyoe === 'collection'){ 
return( 


<View style={naviStyles.bar}> 
<View style={naviStyles.textView}> 
<Text style={naviStyles.text}> 
{this.props.title} 
</Text> 
</View> 
<TouchableOpacity onPress={this.props.pop} 
style={naviStyles.leftButton}> 
<Text> 返 回 </Text> 
</TouchableOpacity> 


</View> 


} 
let naviStyles = StyleSheet.create({ 


bar:{ 


height:64, 
backgroundColor: 'rgb(241,241,241)', 


flexDirection:'row', 
}, 
textView:{ 
alignSelf:'center', 
justifyContent:'center', 
flex:1 
}, 


text:{ 
textAlign:'center', 


fontSize:17 
}, 
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rightButton:{ 
position:'absolute', 
rightsl5y 
alignSelf:'center', 

}, 

leftButton:{ 
position:'absolute', 
Lefts15r 
alignSelf:'center', 

}, 

Ty 


上 面 的 代码 通过 判断 不 同 的 来 源 演 染 不 同 的 界面 。 收 藏 夹 功能 的 相关 代码 这 里 并 没有 编写 ， 
后 面 章节 再 专门 处 理 收藏 功能 。 修 改 MainView 类 的 render 方法 如 下 : 


render (){ 
return( 
<Navigator ref='navigation' initialRoute={{title:' 掌上 新 闻 '， 
type:'root'}} renderScene={ (route,navigator)=>{ 
if (route.type === "root') { 
return( 
<View style={{flex:1}}> 
<NavigationBar title={route.title} 
type={route.type}/> 
<TitleBar click={this.clickTitle} 
ref="titleBar"/> 
<PageView ref='pageView' 
scrollEnd={this.scrollEnd} goDetail={ (item)=>{ 
navigator.push({ 
title:item.description, 
type: 'detail', 
uri:item.url 
有 
De 
</View> 
); 
}else if(route.type= 
return( 
<View style={{flex:1}}> 
<NavigationBar title={route.title} 





‘detail'){ 


type={route.type} pop={ ()=>{ 
navigator.pop(); 
}}/> 
<DetailPage uri={route.uri}/> 
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</View> 
) 7 


}} 


J 
} 


运行 工程 ， 可 以 查看 导航 栏 的 开发 效果 。 
11.10 “添加 收藏 夹 功能 


要 完成 本 节 的 内 容 , 我 们 需要 使 用 React Native 中 的 数据 持久 化 技术 。 首 先 在 项 目的 根 目录 中 
创建 一 个 命名 为 Data 的 文件 夹 ， 在 其 中 创建 一 个 命名 为 DataManagerjs 的 文件 ， 这 个 类 用 来 进行 
收藏 数据 的 管理 ， 在 其 中 编写 如 下 代码 : 


import { 
AsyncStorage 
} from 'react-native'; 
export default class DataManager { 
static getData(callback){ 
AsyncStorage.getItem("data", (error, result)=>{ 
if (!error) { 
result=result?result:""; 
let array = result.split('@@'); 
callback (array); 


}); 
} 
static addCollection(url){ 
this.getData( (array)=>{ 
array.push (url1); 
let string = array.join('@@'); 
AsyncStorage.setIitem('data', string); 
3 


1 
注意 ，DataManager 类 中 的 方法 都 是 使 用 的 静态 方法 ， 不 需要 实例 就 可 以 调用 。 
完善 NavagationBar 的 render 方法 : 


Frender (){ 
if (this.props.type === "root') { 
return( 
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<View style={naviStyles.bar}> 
<View style={naviStyles.textView}> 
<Text style={naviStyles.text}> 
{this.props.title} 
</Text> 
</View> 
<TouchableOpacity onPress={this.props.goCollection} 
style={naviStyles.rightButton}> 


<Text> 收 藏 来 </Text> 
</TouchableOpacity> 
</View> 
); 
}else if(this.props.type === "detail'){ 
return( 


<View style={naviStyles.bar}> 
<View style={naviStyles.textView}> 
<Text style={naviStyles.text}> 
{this.props.title} 
</Text> 
</View> 
<TouchableOpacity onPress={this.props.pop} 
style={naviStyles.leftButton}> 
<Text> 返 回 </Text> 
</TouchableOpacity> 
<TouchableOpacity onPress={ ()=>{ 
DataManager .addCollection (this.props.url); 
Alert .alert ("提示 ", "您 已 经 添加 到 收藏 夹 ") ; 
}} style={naviStyles.rightButton}> 
<Text> 添 加 收藏 </Text> 
</TouchableOpacity> 
</View> 
); 
}else if(this.props.type 
return( 





'collection'){ 


<View style={naviStyles.bar}> 
<View style={naviStyles.textView}> 
<Text style={naviStyles.text}> 
{this.props.title} 
</Text> 
</View> 
<TouchableOpacity onPress={this.props.pop} 
style={naviStyles.leftButton}> 
<Text> 返 回 </Text> 
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</TouchableOpacity> 
</View> 
yy 


. 


在 View 文件 夹 下 创建 一 个 命名 为 CollectionViewjjs 的 文件 ， 
如 下 代码 : 


import React, { Component } from 'react'; 
import { 
View, 
FlatList, 
TouchableOpacity, 
Text, 
StyleSheet 
} from 'react-native'; 
import DataManager from './../Data/DataManager'; 


用 来 展示 收藏 列表 ， 在 其 中 编写 


export default class CollectionView extends Component{ 


constructor (props){ 
super (props); 
let data = new Array(); 
this.state={ 
dataArray:new Rrray() 
DataManager.getData( (array)=>{ 
for (let i=0;i<array.length;i++){ 
if (array[i].length===0) { 
continue; 
} 
data.push({key:i,url:array[i]}); 
this.setState({ 
dataArray:data, 
1 


1); 

1 

render (){ 
return( 


<View style={{flex:1,backgroundColor: 'white'}}> 
<FlatList style={collectionStyles.1ist} 


data={this.state.dataArray} 
renderItem={ ({item})=>{ 
return( 


<TouchableOpacity onPress={ ()=>{ 
this.props.goDetail (item.url); 
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<View> 
<Text style={fcollectionStyles .text}> 
{item.url}</Text> 
<View style={collectionStyles.line}></View> 
</View> 
</TouchableOpacity> 
); 
jjV> 
</View> 


let collectionStyles = StyleSheet.create({ 
text:{ 
fontSize:15， 
marginLeft:15, 
marginRight:15, 
marginBottom:10, 
marginTop:10 
}, 
line:{ 
marginLeft:15, 
height:1, 
backgroundColor: 'rgb(111,111,111)', 
marginBottom:10 


}) 7 
最 后 ， 修 改 MainView 类 的 render 方法 ， 添 加 路 由 跳 转 : 


render (){ 
return( 
<Navigator ref='navigation' initialRoute={{title:' 掌 上 新 闻 '， 
type:'root'}} renderScene={ (route,navigator)=>{ 
if (route.type yooEs)y 





return( 
<View style={{flex:1}}> 
<NavigationBar title={route.title} 
type={route.type} goCollection={()=>{ 
navigator.push({ 
title:" 收 藏 夹 "， 


type: 'collection' 
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<TitleBar click={this.clickTitle} 
ref="titleBar"/> 
<PageView ref='pageView' 
scrollEnd={this.scrollEnd} goDetail={ (item)=>{ 
navigator.push({ 
title:item.description, 
type: 'detail', 
uri:item.url 
En 
FW 
</View> 
); 
}else if(route.type==="'detail'){ 
return( 
<View style={{flex:1}}> 
<NavigationBar title={route.title} 
type={route.type} pop={()=>{ 
navigator.pop(); 
}} url={route.uri}/> 
<DetailPage uri={route.uri}/> 
</View> 
); 
}else if(route.type==='collection'){ 
return( 
<View style={{flex:1}}> 
<NavigationBar title={route.title} 
type={route.type} Pop={ ()=>{ 
navigator.pop(); 
人 
<CollectionView goDetail={ (url)=>{ 
navigator.push({ 
title:" 来 自 收 藏 夹 "， 
type: 'detail', 
uri:url 
2 
}} /> 
</View> 
) 7 


}} 
7 人 


1 
运行 工程 ， 收 藏 新 闻 后 ， 可 以 直接 从 收藏 列表 跳 转 到 新 闻 详情 页 。 
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11.11 优化 方向 与 应 用 图 标 设 置 


到 11.10 节 为 止 , 我 们 已 经 将 掌上 新 闻 应 用 程序 的 所 有 核心 功能 完成 ,但 是 这 个 应 用 程序 并 不 
完美 ， 还 有 许多 细节 需要 优化 ， 这 里 列 出 几 点 供 读者 参考 : 

(1) 在 对 新 闻 进 行 收藏 时 ， 并 没有 进行 是 否 已 经 收藏 的 判断 ， 后 面 可 以 加 上 相关 逻辑 ， 如 果 
此 新 闻 已 经 被 收藏 ， 则 不 显示 收藏 按钮 或 者 用 户 单 击 收藏 按钮 后 提示 已 经 收藏 。 

(2) 收藏 功能 目前 没有 取消 逻辑 ， 用 户 收藏 的 数据 会 越 来 越 多 ， 应 该 为 用 户 添 加 一 个 取消 收 
藏 的 功能 。 

(3) 目前 的 收藏 功能 很 简单 ， 收 藏 列表 界面 显示 的 都 是 URL 地 址 ， 优 化 这 一 部 分 逻辑 ， 使 
其 显示 标题 并 支持 新 闻 分 类 。 

除了 上 面 列 出 的 ， 还 有 很 多 细节 可 以 改进 ， 读 者 可 以 自由 发 挥 ， 应 用 前 面 学 习 的 React Native 
知识 。 

一 个 完整 的 商业 应 用 程序 还 需要 有 一 个 应 用 图 标 ， 如 果 没 有 配置 ， 在 iOS 平台 与 安 卓 平 台 上 
的 应 用 图 标 分 别 如 图 11-6 与 图 11-7 所 示 。 








一 -一 


NewsApp NewsApp 


图 11-6 iOS 平台 上 的 默认 图 标 图 11-7 安 卓 平台 上 的 默认 图 标 


配置 应 用 程序 图 标 并 不 复杂 , 对 于 iOS 平台 , 可 以 直接 打开 目录 中 的 iOS 工程 文件 , 如 图 11-8 
所 示 。 








—tests_ > build >| 

android b News 二 

appjson News-tvOS > 

Data > News-tvOSTests | 
画 index.androidjs 
天 index.ios.js NewsTests 四 

ios qd 

Net bp 

node_modules > 

package.json 

View bp 

yarn.lock 








图 11-8 打开 iOS 工程 文件 
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选择 工程 文件 中 的 images.xcassets 素材 包 ， 将 对 应 尺寸 的 应 用 程序 图 标 放 入 指定 的 位 置 即 可 ， 


如 图 11-9 所 示 。 
对 于 Android 工程 ， 找 到 如 下 路 径 中 的 素材 文件 夹 〈 见 图 11-10) : 





android 一 app 一 src 一 main 一 Tes 





iphone Notiication iphone 
os7-10 Spotlght - OS 5,6 
rt 5-1 


29pt 











图 11-9 配置 iOS 应 用 程序 图 标 
AndroidManifest.xml 名 ic launcher.png 


| java > MM mipmap-mdpi 


» 

res > mipmap-xhdpi bp 
mipmap-xxhdpi 全 

values > 





图 11-10 存放 Android 素材 的 文件 夹 
分 别 替 换 各 个 文件 夹 中 的 ic_launcher.png 文件 即 可 。 需 要 注意 的 是 ， 图 片 尺寸 和 名 称 要 保持 
一 致 。 重 新 编译 工程 ， 应 用 程序 的 图 标 就 变 成 了 我 们 所 设置 的 图 标 。 
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如 果 你 已 经 顺利 地 学 习 到 了 本 章 内 容 , 那么 相信 你 的 React Native 开发 水 平 已 经 到 达 了 一 定 程 
度 ， 使 用 React Native 开发 完整 的 原生 应 用 程序 已 经 不 成 问题 ， 但 是 在 React Native 学 习 之 路 上 ， 
你 所 掌握 的 知识 还 远 远 不 够 , 你 能 够 开发 完整 的 应 用 但 却 不 一 定 可 以 将 应 用 的 性 能 优化 到 最 优 ; 你 
能 灵活 运用 当前 版 本 的 React Native 来 做 需求 开发 却 不 一 定 知道 如 何 对 旧 项 目的 React Native 进行 
升级 与 迁移 ， 你 会 通过 Chrome 开发 者 工具 来 对 React Native 工程 进行 调试 却 没有 使 用 过 更 多 强大 
的 React Native 调试 工具 。 除 了 上 面 所 提 到 的 这 些 ， 如 何在 原生 模块 中 使 用 React Native 和 如 何 封 
装 自己 的 React Native 组 件 也 是 十 分 重要 的 ， 本 章 将 介绍 这 些 内 容 并 起 到 投石 问 路 的 作用 ， 之 后 你 
还 需要 不 断 地 通过 官方 文档 等 资料 更 深入 地 理解 React Native。 


12.1 直接 操作 组 件 的 属性 


在 对 组 件 的 属性 进行 更 新 时 , 前 面 我 们 一 直 使 用 更 新 “状态 ”的 方式 来 实现 。 这 也 是 React Native 
中 推荐 开发 者 使 用 的 更 新 界面 的 方法 。 但 是 使 用 “状态 ”来 进行 组 件 的 更 新 有 一 个 致命 的 缺陷 ， 其 
会 刷新 整个 组 件 ， 即 重新 调用 组 件 的 render 方法 ， 对 于 一 些 复杂 的 自 定义 组 件 ， 如 果 仅 仅 为 了 更 
新 其 中 的 某 一 部 分 , 刷新 状态 会 造成 很 大 的 性 能 浪费 ,如果 要 自己 实现 动画 , 这 也 是 造成 界面 卡 顿 
和 掉 帧 的 主要 原因 。 

虽然 通过 “状态 ”来 管理 你 的 应 用 显示 逻辑 是 十 分 优秀 的 设计 方案 ， 但 是 你 依然 需要 学 会 怎 
么 直接 来 操作 组 件 的 属性 。 我 们 先 来 看 下 面 的 例子 。 

在 HelloWorld 工程 的 Demo 文件 夹 下 新 建 一 个 命名 为 NativeDemojjs 的 文件 , 在 其 中 编写 如 下 
代码 : 


import React, { Component } from 'react'; 





import {View,Text} from ‘react-native'; 
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export default class NativeDemo extends Component{ 
constructor (props){ 
super (props); 
this.state={ 
colors"red” 


} 
render (){ 
console.log("render"); 
return( 
<View> 
<Text onPress={ ()=>{ 
this.setState({ 
color:'green' 
}); 
}} style={{top:200,fontSize:30,textAlign:"center", 
color:this.state.color}} ref="text">{this.props.text}</Text> 
</View> 
A 


} 


上 面 的 代码 中 ,我 们 在 render 方法 里 添加 了 一 个 打印 语句 ,运行 项 目 , 在 Chrome 浏览 器 的 开 
发 者 工具 中 可 以 看 到 ， 每 次 单 击 便签 ， 实 际 上 都 会 重新 执行 render 方法 ， 如 图 12-1 所 示 。 


render 
© render 





图 12-1 多 次 调用 render 方法 
将 render 方法 做 如 下 修改 : 


render (){ 
console.log ("render"); 
return( 
<View> 
<Text onPress={ ()=>{ 
this .refs .text.setNativeProps({ 
style:{fcolor:'green'} 
]}) 7 
}} style={{top:200,fontSize:30,textAlign:"center", 
color:this.state.color}} ref="text">{this.props.text}</Text> 
</View> 
) 
} 


setNativeProps 方 法 可 以 直接 操作 原生 组 件 的 属性 , 如 上 代码 所 示 , 当 单 击 按钮 时 直接 修改 了 Text 
组 件 的 文字 颜色 ， 并 且 不 会 重新 调用 render 方法 ， 这 样 就 实现 了 自 定义 组 件 的 局 部 刷新 。 
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虽然 这 种 局 部 更 新 组 件 的 方法 十 分 好 用 ， 但 是 除非 必要 ， 建 议 最 好 还 是 采用 更 新 “状态 ” 
来 刷新 组 件 ， 使 用 “状态 ”能 使 代码 调理 更 加 清晰 ， 更 易于 进行 界面 与 数据 间 的 管理 。 





12.2 ”对 React Native 版 本 进行 升级 


React Native 如 此 流行 的 原因 不 仅仅 因为 其 是 一 个 十 分 优秀 的 移动 端 跨 平台 方案 ， 更 重要 的 是 
Facebook 团队 一 直 保 持 着 对 它 的 更 新 和 维护 。React Native 框架 的 版 本 也 一 直 在 升级 。 将 旧版 本 的 
工程 升级 为 新 版 本 也 是 开发 者 时 常 要 做 的 一 件 事情 。 

在 工程 目录 下 使 用 如 下 命令 可 以 检查 当前 的 React Native 版 本 : 


react-native --version 


在 终端 执行 上 面 的 命令 后 ， 效 果 如 图 12-2 所 示 。 


vipdeMacBook-Pro-4:HelloWorld jakiS react-native -~-version 
react-native-cli: 2.6.1 


react-native; 0.44.0 
vipdeMacBook-Pro-4:Helloworld jaki$ 有 





图 12-2 检查 当前 React Native 版 本 

所 谓 进 行 React Native 版 本 的 升级 ,实质 上 就 是 使 用 框架 的 新 版 本 的 代码 来 代 奉 旧版 本 的 ， 
种 策 方 法 是 将 所 有 工程 中 你 自己 添加 的 文件 和 代码 复制 出 来 , 然后 新 建 一 个 工程 , 将 这 些 文件 和 代 
码 还 原 回去 ， 但 这 种 升级 方式 一 般 不 会 被 开发 者 所 选择 ， 我 们 通常 会 采用 React Native 自动 升级 工 
有 具 完 成 。 

首先 需要 安装 react-native-git-upgrade 工具 ， 使 用 如 下 命令 进行 安装 : 

npm install -g react-native-git-upgrade 

如 果 想 让 React Native 工程 升级 到 最 新 版 本 ， 可 以 在 工程 根 目录 下 直接 执行 如 下 命令 : 

react-native-git-upgrade 

当然 如 果 你 想 升 级 到 指定 版 本 也 是 可 以 的 ， 使 用 如 下 命令 并 指定 版 本 号 : 

react-native-git-upgrade X.Y.2Z 

一 般 情况 下 ， 如 果 你 没有 修改 过 框架 文件 ， 更 新 完成 后 是 不 会 产生 异常 或 冲突 的 ， 如 果 有 冲 
突 产生 , 需要 你 根据 自己 的 实际 情况 来 解决 这 些 冲突 (实际 上 就 是 选择 框架 的 代码 或 者 是 你 自己 的 
代码 ) 。 





如 果 工程 中 React Native 版 本 与 要 更 新 到 的 版 本 相差 极 大 ， 建 议 你 一 定 要 对 代码 进行 备份 。 
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12.3 ”React Native 的 更 多 调试 技巧 


使 用 Chrome 开发 者 工具 可 以 实时 查看 运行 中 React Native 应 用 的 打印 信息 、 网 络 情况 等 ， 并 
且 可 以 添加 断 点 进行 工程 代码 的 调试 。 熟练 使 用 Chrome 开发 者 工具 就 已 经 可 以 帮助 你 完成 大 部 分 
调试 工作 。 实 际 上 ，React Native 中 还 内 置 了 许多 有 用 的 调试 工具 。 

在 iOS 模拟 器 上 可 以 使 用 command+D〈 真 机 是 摇晃 手机 〉 调 出 开发 者 菜单 ， 在 Android 模拟 
器 上 使 用 command+M ( 真 机 是 摇晃 手机 ) 调 出 开发 者 菜单 。 这 个 操作 你 并 不 陌生 ， 要 使 用 Chrome 
浏览 器 进行 代码 的 远程 调试 就 是 在 这 个 开发 者 菜单 中 设置 的 。 你 也 一 定 发 现 了 , 这 个 开发 者 菜单 中 
还 提供 了 许多 其 他 的 功能 ， 如 图 12-3 所 示 。 

Reload 用 来 进行 界面 的 手动 刷新 ,， 这 个 刷新 方式 会 重新 加 载 远 程 的 JavaScript 文件 。 与 刷新 相 
关 的 功能 还 有 Live Reload 和 Hot Reloading 两 种 ， 如 果 开 启 了 Live Reload 功能 ， 当 你 编写 的 
JavaScript 文件 有 变化 时 ，React Native 会 自动 进行 Reload 刷新 操作 ， 省 去 了 开发 者 经 常 要 手动 刷 
新 的 烦恼 ，Hot Reloading 功能 则 更 加 强大 ， 其 不 会 重新 加 载 应 用 ， 只 会 增 量 地 刷新 界面 ， 也 就 是 
说 ， 如 果 你 在 应 用 运行 中 修改 了 界面 某 个 元 素 的 颜色 代码 ， 此 修改 会 即刻 同步 到 界面 上 。 

JS Remotely 功能 用 来 开启 远程 调试 ， 前 面 我 们 已 经 介绍 过 很 多 ， 这 里 就 不 再 重复 了 。 

Start Systrace 功能 用 来 开启 性 能 分 析 ， 开 启 后 ， 开 发 者 菜单 中 的 此 选项 会 变 成 Stop Systrace。 
性 能 分 析 结 束 后 会 生成 一 份 分 析 报 告 给 开发 者 。 

Toggle Inspector 功能 十 分 强大 ， 可 以 实时 显示 界面 上 元 素 的 风格 设置 、 应 用 的 网 络 访问 情况 
等 ， 如 图 12-4 所 示 。 

Perf Monitor 功能 用 来 显示 应 用 的 状态 信息 ， 例 如 UI 线程 帧 率 、JS 线程 帧 率 、 函 数 运行 耗 时 
和 内 存 使 用 情况 等 ， 如 图 12-5 所 示 。 

[ee ee Tr 


上 和 1138 


Reload 
Debug JS Remotely 


Enable Live Reload 


Start Systrace 


Enable Hot Reloading 


Toggle Inspector 


Show Perf Monitor 
图 12-3 开发 者 菜单 图 12-4 界面 监测 调试 功能 12-5 监测 应 用 状态 与 函数 耗 时 


上 面 这 些 工 具 在 一 般 情况 下 并 不 一 定 会 用 到 ， 但 是 掌握 它们 后 一 定 会 在 优化 项 目 时 助 你 一 辟 
之 力 。 
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12.4 ”React Native 插件 开发 


我 们 使 用 React Native 框架 完成 一 般 的 项 目 当 然 不 在 话 下 ,但 React Native 框架 并 不 是 万 能 的 ， 
它 并 没有 将 原生 模块 的 功能 完 完整 整地 实现 。 又 或 者 说 , 在 做 原生 开发 时 我 们 通常 会 使 用 一 些 第 三 
方 库 和 插件 ， 这 些 自 然 是 React Native 中 不 包含 的 功能 。 本 节 我 们 就 一 起 来 看 看 React Native 更 加 
强大 的 一 面 ， 它 支持 你 构建 自 定义 的 原生 模块 并 在 工程 中 使 用 JavaScript 来 调用 这 些 模块 。 在 学 习 
本 节 前 ， 建 议 你 最 好 积累 一 些 原生 开发 的 经 验 ， 和 否则 本 节 的 内 容 可 能 会 比较 难 理解 。 


12.4.1 构建 iOS 工程 的 原生 模块 


本 小 节 我 们 通过 一 个 简单 的 实例 演示 如 何 构建 [Eee i 
自 定义 的 原生 模块 , 以 及 如 何在 JavaScript 工程 中 调 oY 
用 这 些 模块 。 首 先 ， 打 开 HelloWorld 工程 下 IOS 文 人 
件 夹 中 的 IOS 工程 文件 ， 如 图 12-6 所 示 。 dex ios Hetero 
如 果 你 没 做 过 原生 的 iOS 开发 ， 可 能 对 Xcode | "oe-moules ”四 MvacTtooong 


npm-debug.log 
开发 工具 还 不 太 熟悉 ， 这 里 我 向 你 简单 介绍 一 下 。 Realsae sot 
Xcode 工具 的 开发 界面 可 以 分 为 5 个 部 分 ， 如 图 12-6 打开 ios 工程 文件 

图 12-7 所 示 。 其 中 ， 导 航 区 用 来 展示 文件 列表 、 检 索 列表 、 警 告 和 错误 信息 、 内 存 信息 等 ， 编 码 
区 进行 代码 的 编写 ; 调试 与 输出 区 用 来 进行 代码 断 点 的 调试 以 及 信息 的 输出 ; 配置 区 可 以 对 文件 属 
性 进行 配置 ， 资 源 区 则 是 一 些 代 码 块 、 静 态 资源 的 列表 。 再 看 左 侧 的 导航 区 ，React Native 默认 生 
成 的 工程 中 有 一 个 Libraries 组 ， 这 个 组 中 就 是 React Native 中 内 置 的 一 些 模块 , 我 们 可 以 仿照 它 来 
创建 自己 的 模块 。 

















调试 与 输出 区 











图 12-7 Xcode 工具 开发 面板 
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在 Xcode 工具 栏 中 选择 File 一 New 一 Project... 选 项 ， 新 建 一 个 工程 ， 如 图 12-8 所 示 。 


| & Xcode WI Edt view Find Navigate Editor Product Debug | 


= 

vB Helloword 
Heloworle 
mainjst 
h ApPDel 
m AppDell 
a mages. 
Infoplis 
Launcht 
mmainm 

Librares 
* 本 pcri 
上 看 peact 
» Rcact 
» RcTalol 
» 罗 rcToe 
> 风 Rcnima 
> 四 RcTunl 
» 网 RcThet 
» 鸭 RcTSet 
* 网 RcTTex 


Add Files to “HelloWorld" ... 


Open- 
Open Recent 
Open Quickly.. 


Close Window 
Close "AppDelegate h” 
Close Project 


Save 
Duplicate... 


Export... 


Show in Finder 

Open with External Editor 
Save As Workspace.. 
Project Settings... 


Page Setup.. 
Print... 


12-8 创建 一 个 新 工程 


| New 本 二 


ET wind 


xo| me- 


y Playground.. 
个 中 0 Target 
Projec: 


%W Workspace... 


^%W 
TRW, 


3ET 
人 OT 


BN 
OBN 


BED 
^EN 


3 UTRIT7 UIRIE RS 


ORS Ice AppDelegate : 


UIRes| 


jy (nonatomic, strong) 





%P 


在 弹出 的 窗口 中 选择 iOS 目录 下 的 Cocoa Touch Static Library 静态 库 工程 ， 之 后 单 击 Next 按 


钮 ， 如 图 12-9 所 示 。 





Choose a template for your new project: 














watchos tvOS macOS Cross-platform 
Application 
1 各 = | 
4# aoo 
Single view Game Master-Detail Page-Based Tabbed 
Application Application Application Application 
oo FF 
o0 OO 
Sticker pack iMessage 
Application Application 
Framework & Library 
DA ne 
x、 
Cocoa Touch Cocoa Touch Metal Library 
Framework Static Library 
cancel [ven] 





图 12-9 创建 静态 库 


将 工程 命名 为 RNTools (也 可 以 是 任意 你 喜欢 的 名 称 ) ， 直 接 单 击 Next 按钮 ， 如 图 12-10 所 示 。 

在 弹出 的 配置 窗口 中 ， 将 此 工程 添加 进 HelloWorld 工程 中 ， 并 且 将 其 加 入 Libraries 组 中 ， 如 
图 12-11 所 示 。 需 要 注意 ， 如 果 你 的 窗口 中 没有 这 些 选项 ， 可 以 单 击 Options 按钮 唤 出 。 

完成 上 面 的 工作 后 ，HelloWorld 工程 的 Libraries 组 下 会 多 一 个 RNTools 工程 。 下 面 我 们 需要 
完成 静态 库 的 链接 ， 过 程 如 图 12-12 所 示 。 
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Choose options for your new project 


Product Name: [RNTool 
Team: 痊 理 张 (Personal Team) 
Organization Name: 
Organization Identifier: 


Bundle identifer 





12-10 进行 工程 的 命名 


LE 
Favorltes Yesterdey 

目 Recents 5 5 pm-debug. 
国 百度 云 同步 盘 PE Previous 7 Deys 
园 Alwy Fes 2 
icloud prve 

A Applications 

团 pocuments 

© bomoads 

国 pervedpata 


Hetoworld 

图 Heloworld-tvos 

3 Helloworld-tvOsTests 
World xcodeprol 

a HeloworidTests 


国 Desktop node_modules 


全 wp 


Source Contro: 。 Create Git repository on My Me' 


Keode wit place your project uroer version contol 
Addto: 看 Heloword 


Group: -Bl Libraries 


New Folder Options Create 





图 12-11 进行 工程 组 配置 
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Ra * Target Dependencies (0 ltems) 
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api HelloW ordrests 
Lanensereen eb 六 hbwora wos Unk Binery wah Ubraeries (3 Nems) 译 配置 x 
mmm orld 工 alwona wosrem 
四 LUburea 
"有 mrootveodeori 程 文件 全 mncracoa Ra 
v a RNToots 2. 选 中 二 fbRCTAnimation a Required 人 
1 RNTootsh 和; 全 an Sa 
HelloWorld oe 9 
Sl 伟 tbRCTAnimation a Required 人 
* 四 moduets 目标 文件 使 wacmaaoravoet Reaves S 
» BW RcTAnimation xcodeproi 例 thacTGoolocationa RequiredO 
本 React xcodeprol ee RS 
多 RcTActionshest xcodeprol - 2 ee 2 
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eg 全 mopcretvonea Required 
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图 12-12 添加 链接 静态 库 


370 ”| React Native 全 教程 : 移动 端 跨 平台 应 用 开发 


如 图 12-12 的 操作 会 唤 出 一 个 静态 库 列表 ,找到 其 中 的 libRNTools.a 并 添加 ， 这 个 静态 库 就 是 
我 们 刚刚 创建 的 RNTools 模块 。 

打开 RNTools 工程 下 的 RNTools.h 文件 , 要 将 一 个 原生 类 作为 React Native 的 一 个 模块 , 需要 
在 其 中 实现 RCTBridgeModule 协议 的 相关 方法 ， 首 先 在 RNTools.h 中 添加 如 下 头 文件 : 

#import <Foundation/Foundation.h> 

#import <React/RCTBridgeModule.h> 

#import <React/RCTLog.h> 


其 中 ，Foundation 库 为 Objective-C 语言 的 基础 库 ，RCTBridgeModule 为 React Native 模块 协 
议 ，RCTLog 用 来 进行 React Native 中 的 打印 操作 。 让 RNTools 类 遵守 RCTBridgeModule 协议 , 代 
码 如 下 : 

Qinterface RNTools : NSObject<RCTBridgeModule> 

@end 

在 RNTools.m 文件 中 实现 如 下 的 宏 来 进行 模块 的 导出 ， 传 入 参数 为 模块 的 名 称 〈 即 JavaScript 
调用 原生 模块 的 名 称 ) : 


RCT_EXPORT_MODULE (RNToolsManager); 


如 果 RCT_EXPORT MODULE( 宏 中 不 传 入 任何 参数 ， 则 默认 会 将 当前 类 的 名 称 作为 模块 
名 称 。 





使 用 RCT_REMAP_METHOD 宏 来 进行 原生 函数 的 导出 ， 在 RNTools 类 中 编写 如 下 代码 : 

RCT_REMAP METHOD (printf,param: (NSString *)param param2: (NSString *)param2) 

{ 

RCTLogInfo (@" 这 里 是 原生 模块 的 Log :参数 1-%@， 参 数 2-$8 | 来 自 类 :$8"， 

Param, param2, [self class]); 

} 

RCT_REMAP_METHOD 宏 中 的 第 一 个 参数 为 设置 导出 的 方法 名 ， 这 里 我 们 取 名 为 printf， 第 
二 个 参数 为 导出 方法 的 参数 列表 。 我 们 姑且 实现 这 一 个 方法 ， 重 新 编译 工程 ， 一 个 简单 的 React 
Native 原生 模块 就 构建 完成 了 。 

下 面 我 们 来 实现 JavaScript 代码 ， 在 Demo 文件 夹 下 新 建 一 个 命名 为 ToolsManagerjs 的 文件 ， 
在 其 中 编写 如 下 代码 : 

import { NativeModules } from '‘'react-native'; 

export var ToolsManager = NativeModules.RNToolsManager; 

借助 我 们 前 面 编写 的 NativeDemo 示例 ， 在 NativeDemo.js 中 引入 ToolsManager 模块 : 

import {ToolsManager} from './ToolsManager'; 

在 NativeDemo 类 的 render 方法 中 添加 如 下 代码 : 


ToolsManager .printf ("Jaki"," 理 少 "); 
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上 面 我 们 调用 了 原生 模块 的 printf 方法 ， 并 传 入 了 两 个 参数 ， 运 行 工程 ， 打 开 调 试 工 具 ， 可 以 
看 到 如 图 12-13 所 示 的 打印 信息 。 
这 里 是 原生 模块 的 Log :参数 1-Jaki， 参 数 2- 玉 少 | 来 自 类 :RNTools RCTLog.is:43 
图 12-13 调用 原生 模块 方法 
有 了 时， 可 能 需要 定义 一 些 原生 的 常量 来 供 JavaScript 访问 ， 实 现 如 下 方法 即 可 : 
- (NSDictionary *)constantsToExport 


return @{ @"constName": @"constValue" }; 


} 

到 此 ， 你 已 经 掌握 在 iOS 平台 开发 React Native 原生 模块 的 整体 过 程 。 如 果 你 在 Android 平台 
上 运行 上 面 的 工程 就 会 抛 出 异常 ， 下 一 小 节 我 们 就 来 看 看 如 何 开发 Android 平台 的 React Native 原 
生 模块 。 


12.4.2 ”构建 Android 工程 的 原生 模块 


在 Android 工程 中 自 定义 原生 模块 与 在 iOS 工程 中 自 定义 原生 模块 的 过 程 基 本 一 致 ,但 由 于 平 
台 的 本 身 差异 ， 我 们 还 是 有 必要 专门 用 一 小 节 来 介绍 如 何在 Android 平台 上 定义 原生 模块 ， 在 
Android 平台 定义 原生 模块 需要 进行 如 下 几 个 步骤 : 

人 EDi 创建 原生 模块 . 

TI02 进行 原生 模块 的 包装 . 

703 将 包装 后 的 原生 模块 进行 注册 。 


如 12.4.1 小 节 所 说 ,你 在 iOS 平台 上 运行 工程 
时 非常 完美 ，Android 平台 上 却 会 抛 出 异常 ,我们 
需要 在 Android 工程 中 也 实现 一 个 RNToolsManager 
模块 。 首 先 使 用 Android Studio 工具 打开 项 目的 
Android 工程 ， 即 HelloWorld 工程 文件 夹 下 面 的 
Android 文件 夹 。 将 项 目的 工程 组 织 结构 选择 为 
Android， 如 图 12-14 所 示 。 图 12-14 ”将 工程 的 组 织 结构 选择 为 Android 

图 12-14 中 的 app 一 java 一 com.helloworld 包 就 是 你 的 原生 代码 存放 的 位 置 。 在 com.helloworld 
包 下 新 建 一 个 Java 类 ， 将 其 命名 为 RNToolsManager。Android 中 的 原生 模块 其 实 就 是 一 个 继承 自 
ReactContextBaseJavaModule 的 类 ， 在 其 中 编写 如 下 代码 : 























Package com.helloworld; 

import android.widget.Toast; 

import com.facebook.react.bridge.ReactApplicationContext; 
import com.facebook.react.bridge.ReactContextBaseJavaModule; 
import com.facebook.react.bridge.ReactMethod; 


public class RNToolsManager extends ReactContextBaseJavaModule { 


Public RNToolsManager (ReactApplicationContext reactContext) { 
super (reactContext); 

} 

@Override 

public String getName() { 
return "RNToolsManager"; 

. 

@ReactMethod 

Public void printf (String Paraml,String param2){ 
Toast .makeText (getReactApplicationContext(), "andorid:" 

+paraml+param2, Toast .LENGTH LONG) .show(); 
1 
} 


其 中 ， 构 造 方法 让 Android Studio 自动 生成 ， 不 需要 做 任何 修改 。getName 方法 用 来 设置 原生 
模块 的 名 称 ， 要 为 原生 模块 添加 方法 需要 使 用 @ReactMethod 注解 的 方式 ， 这 点 和 iOS 工程 有 些 区 
别 ， 这 里 我 们 为 了 便于 看 到 效果 ， 弹 出 了 一 个 简单 的 Android 原生 Toast 提示 。 

完成 了 上 面 的 工作 ， 我 们 还 需要 对 创建 的 RNToolsManager 类 进行 包装 ， 在 com.helloworld 包 
下 再 新 建 一 个 Java 类 ,将 其 命名 为 RNToolsManagerPackage， 实 现 一 个 名 为 ReactPackage 的 接口 ， 
在 其 中 编写 如 下 代码 : 


Package com.helloworld; 





import com.facebook.react.ReactPackage; 

import com.facebook.react.bridge.NativeModule; 

import com.facebook.react.bridge.ReactApplicationContext; 
import com.facebook.react.uimanager.ViewManager; 

import java.util.ArrayList; 

import java.util.Collections; 

import java.util.List; 


Public class RNToolsManagerPackage implements ReactPackage { 
@Override 
Public List<NativeModule> createNativeModules (ReactApplicationContext 
reactContext) { 
List<NativeModule> list = new ArrayList<>(); 
list.add(new RNToolsManager (reactContext)); 
return list; 
让 
@Override 
public List<ViewManager> createViewManagers (ReactApplicationContext 
reactContext) { 
return Collections.emptyList(); 
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之 后 ， 需 要 在 MainApplication.java 文件 中 进行 RNToolsManagerPackage 模块 的 注册 ， 在 
MainApplication 类 的 getPackages 方法 中 添加 这 个 包装 过 的 模块 ， 代 码 如 下 : 


QOverride 
Protected List<ReactPackage> getPackages () { 
return Arrays.<ReactPackage>asList( 
new MainReactPackage () ,new RNToolsManagerPackage () 
) 7 
要 导出 常量 ， 需 要 实现 如 下 方法 : 
@Override 
Public Map<String, Object> getConstants() { 
final Map<String, Object> constants = new HashMap<>(); 
constants.put ("constName",constValue); 


return constants; 


} 


到 此 ，Android 平台 上 也 可 以 支持 ToolsManager 的 printf 方法 了 ， 重 新 编译 工程 ， 在 Android 
模拟 器 上 运行 ， 效 果 如 图 12-15 所 示 。 





图 12-15 调用 Android 平台 自 定义 的 原生 模块 方法 
12.4.3 深入 了 解 原生 模块 的 函数 参数 


从 原生 模块 导出 的 方法 无 论 是 iOS 平台 还 是 Android 平台 , 都 不 可 以 有 返回 值 , 但 是 我 们 可 以 
通过 回调 函数 的 方法 来 进行 传 值 交 互 。 原 生 模 块 所 支持 函数 的 参数 类 型 如 表 12-1 所 示 。 

















表 12-1 原生 模块 支持 的 函数 参数 类 型 
JavaScript 参数 类 型 iOS 平台 对 应 参数 类 型 Android 平台 对 应 参数 类 型 
String NSString String 


各 种 数值 类 型 , 如 NSInteger、float double、 
CGFloat、NSNumber 








Number 各 种 数值 类 型 ， 如 Integer、Double、Float 
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( 续 表 ) 
JavaScript 参数 类 型 iOS 平台 对 应 参数 类 型 Android 平台 对 应 参数 类 型 
Boolean BOOL 或 NSNumber Bool 
Array NSAmray ReadableArray 
Object NSDictionaty ReadableMap 
Function RCTResponseSenderBlock CallBack 











回调 函数 是 JavaScript 代码 与 原生 模块 交互 的 一 种 重要 方式 , 例如 我 们 优化 一 下 12.4.2 小 节 构 
建 的 原生 模块 方法 ， 让 其 拼接 完整 的 字符 串 后 传递 回 JavaScript 代码 中 ， 修 改 iOS 工程 中 的 方法 : 


RCT REMAP METHOD (printf,param: (NSString *)param param2: (NSString *)Param2 





Param3: (RCTResponseSenderBlock) claaBack) 
{ 
NSString * string = [NSString stringWithFormat:@" 这 里 是 原生 模块 的 Log: 参 数 
1-%@， 参 数 2-%@ | 来 自 类 : JavaScript",param,param2]; 
claaBack (@[string]); 
} 


修改 Android 工程 中 的 方法 : 


@ReactMethod 
Public void printf(String paraml, String param2, Callback callback){ 
Toast .makeText (getReactApplicationContext (),"andorid:"+paraml+param2, 
Toast .LENGTH LONG) .show(); 
callback.invoke ("andorid:"+paraml+param2); 


3 
修改 NativeDemojs 文件 中 原生 模块 的 调用 方法 ， 为 其 添加 一 个 回调 函数 : 


ToolsManager .printf ("Jaki", " 天 少 ", (str)=>{ 
console.log(str); 
ER 


重新 编译 运行 工程 ， 可 以 看 到 从 原生 模块 传递 回来 的 数据 。 需 要 注意 ， 回 调 函 数 中 传递 的 参 
数 必须 是 数组 ， 数 组 中 的 元 素 会 被 直接 映射 为 JavaScript 回调 中 的 参数 。 
回调 函数 通常 用 来 进行 异步 编程 ， 你 一 定 还 记得 ，ES6 中 的 Promise 对 象 也 是 异步 编程 的 一 种 
方案 ,在 原生 模块 中 也 可 以 使 用 这 种 方式 来 与 JavaScript 进行 交互 ， 在 iOS 原生 模块 中 导出 一 个 新 
的 方法 ， 代 码 如 下 : 

RCT REMAP METHOD (println,success: (BOOL) success resolve: 


(RCTPromiseResolveBlock) resolve reject: (RCTPromiseRejectBlock) reject) 
{ 

















if (success) { 
resolve (8@[@" 成 功 "]); 
}else{ 


// 三 个 参数 ， 分 别 为 状态 码 、 异 常 信 息 和 错误 对 象 
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reject (0, "失败 ",nil) 7 


1 
在 Android 的 原生 模块 中 导出 新 方法 ， 代 码 如 下 : 


@ReactMethod 
Public void println(Boolean success, Promise promise){ 
if (success){ 
promise.resolve( ("成 功 ") ) 
}elsef 
promise.reject ("0", "失败 ") 7 
虽 
上 


修改 JavaScript 代码 : 


Var Promise = ToolsManager.Println(true) 
Promise.then((value)=>{ 
console.log (value); 
}, (error)=>{ 
console.log (error) 7 
和 


这 种 使 用 Promise 进行 异步 编程 的 方式 有 着 同步 编程 的 风格 ， 代 码 结构 清晰 ， 书 写 方 便 。 


12.5 封装 原生 UI 组件 


所 谓 UI (User Interface) ， 即 用 户 接口 ， 通 俗 来 讲 就 是 我 们 一 直 使 用 的 界面 组 件 。 通 过 12.4 


节 的 学 习 ， 我 相信 你 能 够 构建 自己 的 React Native 工具 模块 了 ， 但 是 大 多 数 时 候 ， 你 可 能 更 需要 的 
是 自 定义 的 原生 UI 组 件 。 举 例 来 说 ， 我 们 需要 一 个 跑马 灯 效 果 的 文本 组 件 ，React Native 中 并 没有 
直接 提供 这 样 一 个 组 件 (当然 你 也 可 以 使 用 JavaScript 进行 封装 ) ， 我 们 可 以 直接 封装 一 个 这 样 效 
果 的 原生 组 件 在 JavaScript 中 调用 。 


12.5.1 封装 iOS 平台 的 原生 UI 组件 


首先 使 用 Xcode 开发 工具 打开 iOS 工程 ， 在 我 们 前 面 创建 的 RNTools 模块 下 新 建 一 个 类 ， 如 


图 12-16 所 示 。 


在 弹出 的 设置 窗口 中 将 类 命名 为 FlashView， 并 使 其 继承 自 RCTViewManager 类 ， 如 图 12-17 


所 示 。 


注意 ， 不 要 忘记 在 FlashView.h 文件 中 导入 头 文件 ， 代 码 如 下 : 


#import <React/RCTViewManager.h> 
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Choose a template for your new file: 
EE wros wos macos S 
加 a a 
Cocoa Touch Ul Test Case Unit Test Case Playground Swift File 

Class Class Class 
m h C Cr IN 

Objective-C File Header File Crile C++ File Metal File 

Storyboard View Empty Launch Screen 
Cancel CNet | 





图 12-16 创建 一 个 Cocoa Touch 类 文件 


Choose options for your new file: 


Class: | Flashview 





Subclass of RCTViewManager 日 
Language:。 Objective-C 日 
Cancel Previous EIEN 





12-17 设置 继承 关系 
RCTViewManager 类 相当 于 一 个 视图 控制 器 ， 其 完成 原生 UI 组 件 与 JavaScript 之 间 的 桥接 。 
下 面 我 们 还 需要 创建 一 个 原生 的 组 件 来 展现 视图 , 使 用 上 面 的 方法 再 次 创建 一 个 类 文件 , 这 次 使 其 
继承 于 原生 的 UILabel 类 ， 将 其 命名 为 NativeFlashView。 实 现 FlashView.m 文件 如 下 : 


#import "FlashView.h" 
#import "NativeFlashView.h" 





Qimplementation FlashView 
RCT EXPORT MODULE (FlashView) 
-(UIView *)view{ 

return [NativeFlashView new]; 
} 
@end 
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创建 原生 UI 组件 至 少 需要 两 步 : 


人 ET 将 此 控制 器 模块 进行 导出 ， 即 使 用 RCT_EXPORT _ MODULE 宏 来 完成 . 
C7102 实现 view 实例 方法 ， 这 个 方法 将 需要 的 原生 视图 返回 。 


下 面 我 们 可 以 在 JavaScript 工程 中 进行 一 个 简单 的 测试 ， 修 改 ToolsManager.js 文件 如 下 : 


import { NativeModules,requireNativeComponent } from 'react-native'; 





export var ToolsManager = NativeModules.RNToolsManager; 
export var FlashView = requireNativeComponent ('FlashView',null); 


requireNativeComponent 函数 用 来 进行 原生 组 件 的 引入 。 注 意 ， 这 个 函数 接收 两 个 参数 ， 第 1 
个 参数 为 原生 组 件 的 名 称 ， 第 2 个 参数 为 组 件 的 描述 对 象 , 关于 描述 对 象 我 们 暂且 搁置 一 边 ， 后 面 
会 使 用 到 。 在 Demo 文件 夹 下 新 建 一 个 命名 为 NativeViewDemojjs 的 文件 ， 实 现代 码 如 下 : 


import React, { Component } from 'react'; 
import {View,Text} from 'react-native'; 
import {FlashView} from './ToolsManager'; 
export default class NativeViewDemo extends Component{ 
render (){ 
return( 
<FlashView style={{top:30,height:30,backgroundColor:'red'}}/> 
); 


} 
修改 index.iosjs 文件 后 运行 工程 ， 可 以 看 到 自 定义 的 原生 组 件 已 经 显示 在 屏幕 上 ， 如 图 12-18 
所 示 。 





图 12-18 自 定义 原生 组 件 


仅仅 展现 出 来 一 个 原生 的 视图 远 远 不 能 满足 我 们 的 需求 ， 我 们 需要 能 够 设置 组 件 上 面 的 文字 ， 
这 就 需要 使 用 到 , 将 原生 属性 导出 到 JavaScript 也 十 分 简单 ,修改 FlashView.m 文件 中 的 代码 如 下 : 
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#import "FlashView.h" 
#import "NativeFlashView.h" 
Qinterface FlashView() 


@property (nonatomic, strong)NSString * text; 
Qproperty (nonatomic, strong)NativeFlashView * nativeView; 
@end 
Qimplementation FlashView 
RCT_ EXPORT MODULE (FlashView) 
-(UIView *)view{ 
return self.nativeView; 
} 
RCT EXPORT VIEW PROPERTY (text, NSString*) 
- (void) setText: (NSString *)text{ 
self.nativeView.text = text; 
} 
-(NativeFlashView *)nativeViewt{ 
if (! nativeView) { 
_nativeView = [NativeFlashView new]; 
} 
return nativeView; 


} 
eend 


看 懂 上 面 的 代码 需要 一 些 原生 开发 经 验 ， 如 果 你 做 过 iOS 开发 ， 那 么 上 面 的 代码 很 容易 理解 ， 
如 果 没 有 做 过 也 没关系 , 核心 在 于 RCT_EXPORT_VIEW_PROPERTY 宏 , 它 用 来 导出 一 个 原生 属性 。 

下 面 我 们 来 修改 一 下 ToolsManagerjs 文件 中 的 代码 ， 原 则 上 讲 ， 你 已 经 可 以 直接 在 JavaScript 
代码 中 使 用 原生 组 件 导出 的 属性 , 但 是 作为 可 复 用 组 件 的 封装 , 不 是 所 有 使 用 者 都 会 去 原生 代码 中 
找 所 导出 的 属性 有 哪些 ， 因 此 你 可 以 将 JavaScript 组 件 再 进行 一 次 封装 ， 将 所 导出 的 原生 属性 进行 
暴露 ， 代 码 如 下 : 


import React, { Component， PropTypes } from "Feact' 7 
import { NativeModules,requireNativeComponent } from 'react-native'; 
export var ToolsManager = NativeModules.RNToolsManager; 
Var FView = requireNativeComponent ('FlashView',FlashView); 
export class FlashView extends Component{ 
static propTypes = { 
/* 
* 设置 文本 
2 
text:PropTypes.string 
} 
render (){ 
return( 
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<FView {...this.props} /> 
); 


} 


可 以 看 到 ， requireNativeComponent 方法 的 第 2 个 参数 已 经 换 成 了 FlashView 对 象 , 这 样 React 
Native 就 会 对 组 件 的 属性 及 类 型 进行 检查 ， 便 于 开发 调试 与 查 错 。 修 改 NativeViewDemo 类 ， 代 码 
如 下 : 


export default class NativeViewDemo extends Component{ 
render (){ 
return( 
<FlashView style={{top:30,height:30,backgroundColor:'red'}} 
text="Hello World"/> 
人 


} 
再 次 编译 运行 工程 ， 效 果 如 图 12-19 所 示 。 


Phone SE -OS 03 TE 
运 商 全 FF:48 





图 12-19 设置 原生 组 件 的 属性 


下 面 我 们 来 实现 跑马 灯 的 需求 ， 首 先 当 用 户 单 击 文本 组 件 时 ， 跑 马 灯 效果 开局， 再 次 单 击 则 
关闭 跑马 灯 效 果 ， 因 此 需要 为 原生 组 件 添 加 一 个 手势 ， 先 修改 NativeFlashView.h 文件 ， 代 码 如 下 : 


#import <UIKit/UIKit.h> 

#import <React/UIViewtReact.h> 
Qinterface NativeFlashView : UILabel 
// 开 启 

-(void)start; 

// 关 闭 

- (void) stop; 

//JavaScript 回调 
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Q@property (nonatomic,copy)RCTBubblingEventBlock onPress; 
@end 


修改 NativeFlashView.m 文件 ， 代 码 如 下 : 


#import "NativeFlashView.h" 
@interface NativeFlashView() 
@property (nonatomic, strong)NSTimer * timer; 
@end 
Qimplementation NativeFlashView 
- (instancetype)init 
{ 
self = [super init]; 
if (self) { 
self.timer = [NSTimer scheduledTimerWithTimeInterval:l1 target:self 
selector:@selector (flash) userInfo:nil repeats:YES]; 
self.timer.fireDate = [NSDate distantFuture]; 
} 
return self; 
} 
-(void)flash{ 
self.textColor = [UIColor colorWithRed:arc4random()%255/255.0 
green:arc4random()%255/255.0 blue:arc4random()%255/255.0 alpha:1]; 
self.backgroundColor = [UIColor colorWithRed:arc4random()®%255/255.0 
green:arc4random()%255/255.0 blue:arc4random()%255/255.0 alpha:1]; 
} 
- (void) start{ 
self.timer.fireDate = [NSDate distantPast]; 
- (void) stop{ 
self.timer.fireDate = [NSDate distantFuture]; 
} 
@end 


修改 FlashView.m 文件 ， 代 码 如 下 : 


#import "FlashView.h" 

#import "NativeFlashView.h" 

Qinterface FlashView() 

@property (nonatomic,strong)NSString * text; 

Qproperty (nonatomic, strong)NativeFlashView * nativeView; 
// 手 势 

Qproperty (nonatomic, strong)UITapGestureRecognizer * tap; 
// 标 记 状 态 

@property (nonatomic,assign)BOOL flashing; 

@end 

Qimplementation FlashView 
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RCT EXPORT _ MODULE (FlashView) 
-(UIView *)view{ 
return self.nativeView; 
} 
RCT EXPORT VIEW PROPERTY (text, NSString*) 
RCT EXPORT VIEW PROPERTY (onPress, RCTBubblingEventBlock) 
-(void) setText: (NSString *)text{ 
self.nativeView.text = text; 
} 
-(NativeFlashView *)nativeView{ 
if (! nativeView) { 
_nativeView = [NativeFlashView new]; 
[_nativeView addGestureRecognizer:self.tap]; 
3 
return nativeView; 
} 
-(UITapGestureRecognizer *)tap{ 
Ie "(I tap) { 
_tap = [[UITapGestureRecognizer alloc]initWithTarget:self 
action:@selector (tapClick)]; 
} 
return tap; 
} 
-(void)tapClickt{ 
self.nativeView.onPress (@{@"flashing":@ (self.flashing)}); 
} 
// 导 出 原生 方法 
RCT REMAP METHOD (start, start){ 
[self.nativeView start]; 
self.flashing = YES; 
} 
RCT_REMAP METHOD (stop, stop)t{ 
[self.nativeView stop]; 
self.flashing = NO; 
} 


下 面 我 们 再 来 看 一 下 JavaScript 代码 ， 首 先 修改 ToolsManagerjs 文件 ， 代 码 如 下 : 


import React, { Component, PropTypes } from 'react'; 
import { NativeModules,requireNativeComponent } from 'react-native'; 
export var ToolsManager = NativeModules.RNToolsManager; 
var FView = requireNativeComponent ('FlashView',FlashView); 
// 导 入 方法 模块 
Var FViewManager = NativeModules.FlashView; 
export class FlashView extends Component{ 
static propTypes = { 
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* 设置 文本 
#/ 


text:PropTypes.string, 
onPress:PropTypes.func 
} 
render (){ 
return( 
<FView {...this.props} /> 
); 
} 
start=()=>{ 
FViewManager.start (); 
} 
stop=()=>{ 
FViewManager.stop(); 


} 
修改 NativeViewDemo 类 ， 代 码 如 下 : 


export default class NativeViewDemo extends Component{ 
render (){ 


return ( 
<FlashView style={{top:30,height:30,backgroundColor:'red'}} 


text="Hello World" 
onPress={ (e)=>{ 
if (e.nativeEvent.flashing) { 
this.refs.FlashView.stop(); 
}else{ 
this.refs.FlashView.start (); 


} 
}} ref="FlashView"/> 


RR 
} 
再 次 编译 运行 工程 ， 好 好 享受 跑马 灯 的 乐趣 吧 ! 
12.5.2 ”开发 Android 跑马 灯 组 件 
有 了 iOS 平台 的 开发 经 验 ， 再 将 其 适 配 到 Android 平台 就 相对 简单 一 些 了 。 首 先 使 用 Android 
Studio 工具 打开 HelloWorld 工程 ， 新 建 一 个 Java 类 ， 将 其 命名 为 FlashView 并 使 其 继承 自 
SimpleViewManager 类 ， 编 写 代码 如 下 : 


Package com.helloworld; 
import android.graphics.Color7 
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import android.os.Handler7 
import android.os.Looper; 
import android.os.Message; 
import android.util.Log; 
import android.view.MotionEvent; 
import android.view.View7 
import android.widget.TextView7 
import com.facebook.react.bridge.Arguments; 
import com.facebook.react.bridge.ReactMethod; 
import com.facebook.react.bridge.WritableMap; 
import com.facebook.react.uimanager.SimpleViewManager; 
import com.facebook.react.uimanager.ThemedReactContext; 
import com.facebook.react.uimanager.annotations.ReactProp; 
import com.facebook.react.uimanager.events.RCTEventEmitter; 
import java.util.Timer; 
import java.util.TimerTask; 
// 需 要 注意 ， 父 类 后 的 中 括号 中 需要 写 上 要 包装 的 组 件 类 
public class FlashView extends SimpleViewManager<TextView> { 
WET 
Private static ThemedReactContext context; 
// 原 生 UI 组 件 ， 这 里 使 用 原生 的 TextView， 当 然 也 可 以 是 自 定义 的 
Private static TextView nativeView; 
// 跑 马 灯 开关 
static public boolean isflashing = false; 
// 定 时 器 
Private Timer timer; 
// 进 行 跑马 灯 开 关 操作 的 方法 
Handler handler = new Handler (Looper.getMainLooper () ,new Handler.Callback () { 
@Override 
Public boolean handleMessage (Message msg) { 
if (msg.what == 1) { 
if (isflashing) { 
nativeView.setTextColor (Color.rgb((int) (Math.random() * 
255), (int) (Math.random() * 255), (int) (Math.random() * 255))); 
nativeView.setBackgroundColor (Color.rgb( (int) 
(Math.random() * 255), (int) (Math.random() * 255), (int) (Math.random() * 255))); 
Log.e("e","1"); 
} 
}else if(msg.what==2){ 
if (!isflashing) { 
IE (timer==null1){ 
timer = new Timer(); 
timer.schedule (task, 0, 1000); 
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isflashing = true; 
J}else{ 
isflashing 


false; 
Hf 


return true; 


py 
// 定 时 器 任务 对 象 
TimerTask task = new TimerTask() { 
@Override 
Public void run() { 
// 需要 做 的 事 :发 送 消息 
Message msg = new Message(); 
msg.what = 1; 
handler.sendMessage (msg); 


}; 
// 实 现 这 个 方法 来 进行 导出 原生 组 件 名 称 的 设置 
@Override 
Public String getName() { 
return "FlashView"; 
3 
// 实 现 这 个 方法 来 进行 原生 组 件 的 创建 
Goverride 
Protected TextView createViewInstance (final ThemedReactContext 


reactContext) { 


this.context = reactContext; 
this.nativeView = new TextView (context); 
final FlashView self = this; 

// 设 置 手势 监听 


this.nativeView.setOnTouchListener (new View.OnTouchListener () 


@Override 
Public boolean onTouch (View v, MotionEvent event) { 
if(event.getAction() != MotionEvent.ACTION UP){ 


return true; 
| 
WritableMap Param = Arguments.createMap(); 
Param.putBoolean ("flashing",isflashing); 


// 调 用 JavaScript 端的 函数 属性 


self.context .getJSModule (RCTEventEmitter.class) .receiVeEvent( 


nativeView.getId(), 
"topChange", 
Param 

天 

return true; 


{ 
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} 


1 
Hs 


return this.nativeView; 


// 导 出 属性 
@ReactProp (name="text") 
Public void setText (TextView label,String text){ 


this.nativeView.setText (text); 


// 导 出 方法 
@ReactMethod 
Public void start(){ 


Message m = new Message () 7 


】 


m.what = 27 


handler .sendMessage (m); 


@ReactMethod 
Public void stop(){ 


} 


Message m = new Message(); 
m.what = 3; 


handler.sendMessage (m); 


看 懂 上 面 的 代码 需要 你 有 一 定 原生 开发 的 能 力 ， 虽 然 上 面 的 代码 看 似 复杂 ， 但 是 其 实 核心 部 分 


很 清晰 。 


注意 ， selfcontext,getJSModule(RCTEventEmitter.class).receiveEvent(nativeView.getId0), 


"topChange", param); 这 部 分 代码 是 对 JavaScript 组件 属 性 中 的 函数 进行 调用 ,与 iOS 咯 有 不 同 , getId() 
函数 用 来 关联 原生 与 JavaScriptUI 组 件 ，topChange 为 导出 方法 名 称 ， 但 是 需要 特别 注意 ， 这 个 名 

称 在 JavaScript 端 会 被 映射 成 onChange 属性 ，param 为 我 们 要 传递 的 原生 参数 。 就 如 在 Android 平 

台 开 发 原生 模块 一 样 ， 你 需要 再 创建 一 个 包装 类 ， 新 建 一 个 Java 类 文件 ， 将 其 命名 为 

FlashViewPackage 并 使 其 继承 自 ReactPackage 类 ， 实 现代 码 如 下 : 


Package com.helloworld; 


import 
import 
import 
import 
import 
import 
import 
public 


com.facebook.react.ReactPackage; 
com.facebook.react .bridge.NativeModule; 
com.facebook.react .bridge.ReactApplicationContext; 
com.facebook.react .uimanager .ViewManager; 
java.util.ArrayList; 

java.util.Arrays; 

java.util.List; 

class FlashViewPackage implements ReactPackage{ 


@Override 


Public List<NativeModule> createNativeModules (ReactApplicationContext 
reactContext) { 
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List<NativeModule> list = new ArrayList<>(); 
list.add(new FlashView()); 
return list; 
} 
Q@Override 
Public List<ViewManager> createViewManagers (ReactApplicationContext 
reactContext) { 
return Arrays.<ViewManager>asList( 
new FlashView() 
); 


1 
最 后 不 要 忘 了 ， 在 MainApplication 类 中 将 FlashViewPackage 进行 注册 ， 代 码 如 下 : 


Q@Override 
Protected List<ReactPackage> getPackages() { 
return Arrays.<ReactPackage>asList( 
new MainReactPackage(), new RNToolsManagerPackage(), 
new FlashViewPackage() 


有 





点 修改 ， 我 们 刚才 提 到 ，Android 
村 对 其 进行 一 下 兼容 : 





export class FlashView extends Component{ 
static propTypes = { 
/* 
* 设置 文本 
A 
text:PropTypes.string, 
onPress:PropTypes.func 
} 
render (){ 
return( 


<FView {...this.props} onChange={this.props.onPress}/> 


} 

start=()=>{ 
FViewManager.start (); 

1 

stop=()=>{ 
FViewManager.stop(); 
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现在 ,在 Android 平台 编译 并 运营 你 的 工程 ， 你 开发 的 第 一 个 可 复 用 的 原生 跑马 灯 组 件 就 完成 了 。 
12.6 “在 原生 工程 中 识 人 React Native 模块 


本 章 中 的 许多 内 容 都 属于 React Native 技术 的 高 级 内 容 ， 如 果 你 无 法 完全 掌握 它们 也 不 要 心 
急 , 很 多 知识 是 在 你 拥有 了 足够 的 开发 经 验 后 融会 贯通 的 。 本 书 前 面 介 绍 的 所 有 内 容 都 是 基于 完整 
的 React Native 工程 的 ， 有 些 时 候 ， 你 可 能 已 经 有 了 一 个 成 型 的 原生 项 目 ， 你 想 将 其 中 的 某 一 块 使 
用 React Native 进行 实现 ， 以 达到 复 用 和 快速 迭代 的 目的 ， 这 对 React Native 来 说 也 十 分 容易 。 
12.6.1 将 iOS 工程 的 某 个 模块 进行 React Native 化 


首先 ， 你 需要 有 一 个 React Native 原生 工程 ， 使 用 Xcode 开发 工具 创建 一 个 新 的 工程 ， 如 图 
12-20 所 示 。 


Welcome to Xcode 


Od 
创建 工程 
Get started with a playground 


Explore new ideas quickly and easily. 
,| Create anew Xcode proje 
| create an app for iPhone, iPad, Mac, Apple Watch or Apple TV. 
人 check out an existing project 
Start working on something from an SCM repository 





Show this window when Xcode launches 


图 12-20 创建 新 工程 





将 创建 的 工程 命名 为 React NativeModule,， 新 创建 的 工程 可 以 直接 运行 ， 单 击 Xcode 开发 工具 
左上 和 角 的 运行 按钮 即 可 在 模拟 器 上 运行 工程 。 我 们 刚才 所 建 的 工程 是 一 个 空 的 项 目 ， 如 果 运 行 ， 你 
会 看 到 设备 界面 上 一 片 空白 ， 下 面 我 们 来 向 界面 中 添加 一 个 按钮 ， 在 ViewController 类 的 
viewDidLoad 方法 中 编写 如 下 代码 : 

- (void)viewDidLoad { 

[super viewDidLoad]; 

UIButton * button = [UIButton buttonWithType:UIButtonTypeSystem]; 
[button setTitle:@"Hello RN" forState:UIControlStateNormall]; 
button.frame = CGRectMake (self.view.frame.size.width/2-50, 200, 100, 30); 
[self.view addSubview:button]; 
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[button addTarget:self action:@selector (gotoRN) forControlEvents: 
UIControlEventTouchUpInsidel]; 
| 
上 面 的 代码 创建 了 一 个 按钮 ， 并 为 此 按钮 添加 了 一 个 名 为 gotoRN 的 单 击 事件 , 我 们 可 以 暂时 
不 实现 这 个 方法 ， 运 行 工程 ， 效 果 如 图 12-21 所 示 。 





Hello RN 





图 12-21 原生 工程 界面 


下 面 我 们 实现 当 单 击 Hello RN 按钮 后 跳 转 到 一 个 React Native 界面 。 首先 需要 构建 一 个 React 
Native 工程 ， 在 桌面 上 新 建 一 个 目录 ， 命 名 为 RNModule， 在 其 中 再 新 建 一 个 文件 夹 ， 命 名 为 ios， 
接着 将 原生 iOS 工程 中 的 所 有 文件 移动 到 这 个 ios 文件 夹 下 , 然后 在 RNModule 文件 夹 下 新 建 一 个 
命名 为 packagejson 的 文件 ， 编 写 如 下 代码 : 


{ 
"name": "React NativeModule", 
"version™s "0.0.1™; 
"private": true, 
"oripts ee 
"start": "node node modules/react-native/local-cli/cli.js start" 
}, 
"dependencies": { 
"react"; "16.0.0-alpha.6", 
"react-native": "0.44.3" 
} 


注意 ， 示 例 中 使 用 的 React Native 版 本 为 0.44.3， 某 些 React Native 版 本 可 能 并 不 支持 嵌入 原 
生 模 块 中 。 之 后 使 用 终端 在 RNModule 文件 夹 下 执行 yarn install 命令 ， 完 成 之 后 ，RNModule 文件 
夹 下 会 多 出 一 个 node_ modules 目录 ， 这 个 目录 中 存放 着 所 有 需要 使 用 到 的 框架 。 
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完成 了 上 面 的 过 程 ， 我 们 需要 对 原生 的 iOS 工程 进行 配置 ， 首 先 需要 安装 CocoaPods 管理 工 
具 ， 这 个 工具 用 来 管理 iOS 工程 的 第 三 方 类 库 ， 类似 于 Node 中 的 npm 工具 。 关 于 CocoaPods 的 安 
装 ， 这 里 就 不 再 著述 了 ， 互 联网 上 有 很 多 的 资料 可 以 参考 。 使 用 终端 在 ios 目录 下 执行 如 下 命令 进 
行 CocoaPods 工程 的 初始 化 : 


pod init 
执行 完成 pod init 命令 后 ，ios 文件 夹 中 会 多 出 一 个 Podfile 文件 ， 在 其 中 编写 如 下 代码 : 


target 'React NativeModule' do 
pod 'React', :path => '../node modules/react-native', :subspecs => [ 
MoOorer 
‘DevSupport', 
ROPTaxtE 
'RCTNetwork', 
'RCTWebSocket', 
# 在 这 里 继续 添加 你 所 需要 的 模块 
] 
Pod "Yoga", :path => "../node modules/react-native/ReactCommon/yoga" 
end 


上 面 我 们 引入 React Native 中 的 核心 模块 ， 网 络 模块 、 开 发 者 调试 模块 和 文本 组 件 Text 模块 ， 
如 果 你 需要 引入 其 他 的 React Native 模块 ， 可 以 继续 导入 。 关 于 React Native 所 有 模块 的 名 称 定义 
在 node_ modules 一 react-native 一 React.podspec 文件 中 。 之 后 使 用 终端 在 ios 目录 下 执行 如 下 命令 : 


pod install 


完成 上 面 的 命令 后 ， 你 的 工程 结构 应 该 如 图 yarmiock EB ReactNative. ule xcodepro) 
1KB~10 KB 馈 ReactNative....xcworkspace 
12-22 所 示 。 yarn-error.log 1KB~10 KB 
需要 注意 , 执行 完 pod install 命令 后 , 你 需要 |100F%~ire Podfileock 
使 用 React NativeModule.xcworkspace 文件 打开 原 sa ee eh Wd 
生 工 程 。 


node_modules | Pods 


下 面 我 们 来 编写 一 个 简单 的 React Native 界 | ReactNativeModule 
面 ， 在 RNModule 目录 下 新 建 一 个 命名 为 
indexiosjs 的 文件 ， 在 其 中 编写 如 下 代码 : I 





import React from 'react'; 
import { 
AppRegistry, 
StyleSheet, 
Text, 
View 
} from 'react-native'; 
class RNView extends React.Component { 
render() { 
return ( 


390 | React Native 全 教程 : 移动 端 跨 平台 应 用 开发 


<View style={styles.container}> 
<Text style={styles.text}> 
Welcome to React Native! 
</Text> 
</View> 


const styles = StyleSheet.create({ 
container: { 
fieoxs ir 
justifyContent: 'center', 
alignItems: 'center', 
backgroundColor: '#FFFFFF', 
Vr 
text: { 
fontSize: 20, 
textAlign: 'center', 
margin: 10, 
} 
1); 
// 整体 js 模块 的 名 称 


AppRegistry.registerComponent ('React NativeModule', 
上 面 的 代码 创建 了 一 个 简单 的 文本 ， 并 将 整个 模块 进行 注册 。 在 iOS 原生 工程 的 
ViewController.m 文件 中 导入 如 下 头 文件 : 


#import <React/RCTRootView.h> 


() => RNView) 


实现 我 们 前 面 空 下 的 gotoRN 方法 : 
- (void)gotoRN{ 


// 创 建 React Native 模块 本 地 地 址 
NSURL *jsCodeLocation = [NSURL 


URLWithSstring:@"http://localhost:8081/index.ios.bundle?platform=ios"]; 

// 创 建 React Native 视图 

RCTRootView *rootView = 

[[RCTRootView alloc] initWithBundleURL : jsCodeLocation 
moduleName : @"React NativeModule" 
initialProperties : nil 
launchOptions nLL] 

UIViewController *vc = [[UIViewController alloc] init]; 

VCc.view = rootView; 

[self PresentViewController:vc animated:YES completion:nil]; 
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要 运行 工程 ， 首 先 使 用 终端 在 RNModule 目录 下 执行 如 下 命令 来 开启 本 地 服务 : 

npm start 

之 后 在 RNMudule 目录 下 执行 下 面 的 命令 来 运行 iOS 原生 工程 : 

react-native run-ios 

单 击 界面 上 的 Hello RN 按钮 ， 可 以 看 到 界面 跳 转 到 了 React Native 模块 ， 如 图 12-23 所 示 。 


下 于 925 


Welcome to ReactNative! 






图 12-23 ”React Native 模块 界面 
12.6.2 将 Android 工程 的 某 个 模块 进行 React Native 化 


我 们 仿照 iOS 工程 的 模式 来 进行 Android 工程 原生 模块 的 React Native 化 ， 首 先 使 用 Android 
Studio 工具 创建 一 个 空 的 Android 工程 , 在 选择 工程 模板 时 , 选择 Empty Activity, 如 图 12-24 所 示 。 


LE) Create New 





yx Add an Activity to Mobile 


+ 


Empty Activity 


图 12-24 ”创建 空 的 Android 工程 
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创建 完工 程 后 ， 无 须 编写 任何 代码 ， 在 模拟 器 上 进行 项 目的 运行 ， 效 果 如 图 12-25 所 示 。 


My Application 





12-25 HelloWorld 工程 界面 
JavaScript 工程 先 不 需要 做 任何 修改 ， 在 根 目录 下 新 建 一 个 命名 为 index.android.js 的 文件 ， 并 
将 index.iosjs 文件 中 的 所 有 内 容 复制 进来 即 可 。 下面 进行 Android 原生 工程 的 配置 , 首先 在 Module 
下 的 build.gradle 文件 中 添加 依赖 : 





apply plugin: 'com.android.application' 
android { 
compileSdkVersion 23 
buildToolsVersion "25.0.0" 
defaultConfig { 
applicationId "com.example.jaki.myapplication" 
minSdkVersion 16 
targetSdkVersion 23 
versionCode 1 
versionName "1.0" 
testInstrumentationRunner 
"android.support.test.runner.AndroidJUnitRunner" 
ndk { 
abiFilters "armeabi-v7ia", "x86" 
1 
PpackagingOptions { 
exclude "lib/arm64-v8a/librealm-jni.so" 


} 

| 

buildTypes { 
release { 


minifyEnabled false 
proguardFiles getDefaultProguardFile('proguard-android.txt"'), 
'Proguard-rules.pro' 


| .2398 
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} 
configurations.all { 
resolutionStrategy.force 'com.google.code.findbugs:jsr305:1.3.9' 


} 

dependencies { 
compile fileTree(dir: 'libs', include: ['*.jar']) 
androidTestCompile('com.android.support.test.espresso: 


espresso-core:2.2.2', { 
exclude group: 'com.android.support', module: 'support-annotations' 


} 

compile 'com.android.support:appcompat-v7:23.0.1' 

compile 'com.android.support.constraint:constraint-layout:1.0.2' 
testCompile 'junit:junit:4.12' 

compile "com.facebook.react:react-native:0.44.3" 


} 
修改 Product 下 的 build.gradle 文件 ， 代 码 如 下 : 


buildscript { 

repositories { 
jcenter () 

} 

dependencies { 
classpath 'com.android.tools.build:gradle:2.3.0' 
// NOTE: Do not place your application dependencies here; they belong 
// in the individual module build.gradle files 


1 
allprojects { 
repositories { 
jcenter () 


} 
allprojects { 
repositories { 


maven { 
// All of React Native (JS, Android binaries) is installed from npm 


url "$rootDir/../node modules/react-native/android" 


1 
task clean(type: Delete) { 
delete rootProject.buildDir 
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在 工程 中 新 建 一 个 命名 为 RNActivity 的 Java 类 ， 使 其 继承 自 Activity， 在 其 中 编写 如 下 代码 : 


Package com.example.jaki.myapplication; 
import android.app.Activity; 
import android.os.Bundle; 
import android.view.KeyEvent; 
import com.facebook.react.ReactInstanceManager; 
import com.facebook.react.ReactRootView; 
import com.facebook.react.common.LifecycleState; 
import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler; 
import com.facebook.react.shell .MainReactPackage; 
Public class RNActivity extends Activity implements 
DefaultHardwareBackBtnHandler { 
Private ReactRootView mReactRootView; 
Private ReactInstanceManager mReactInstanceManager; 
@Override 
Protected void onCreate (Bundle savedInstanceState) { 
super.onCreate (savedInstanceState); 
mReactRootView = new ReactRootView (this); 
mReactInstanceManager = ReactInstanceManager .builder() 
.SetApplication (getApplication()) 
.SetBundleAssetName ("index.android.bundle") 
.SetJSMainModuleName ("index.android") 
.addPackage (new MainReactPackage () ) 
.SetUseDeveloperSupport (BuildConfig.DEBUG) 
.SetInitialLifecycleState (LifecycleState .RESUMED) 
.build(); 
// 注意 这 里 的 MYReact NativeApp 必须 对 应 “index.android.js” 中 
// “AppRegistry.registerComponent () ”的 第 一 个 参数 
mReactRootView.startReactApplication (mReactInstanceManager, "React 
NativeModule", null); 
setContentView (mReactRootView); 
} 
@Override 
Public void invokeDefaultOnBackPressed() { 
Super .onBackPressed () 
} 
@Override 
protected void onPause() { 
super.onPause(); 
if (mReactInstanceManager != null) { 
mReactInstanceManager .onHostPause (this); 


E 
@Override 


第 12 章 “React Native 高 级 技巧 


395 





Protected void onResume() { 


Super .onResume () 7 


if (mReactInstanceManager != null) { 
mReactInstanceManager .onHostResume (this, 
下 
QQoverride 


Protected void onDestroy() { 


super .onDestroy() 
if (mReactInstanceManager != null) { 
mReactInstanceManager .onHostDestroy () 


@Override 


Public void onBackPressed() { 


1 


if (mReactIinstanceManager != null) { 
mReactInstanceManager .onBackPressed(); 
} else { 
super.onBackPressed(); 


@Override 


Public boolean onKeyUp (int keyCode, KeyEvent event) 


} 


this); 


{ 


if (keyCode == KeyEvent.KEYCODE MENU && mReactInstanceManager != null) { 


mReactInstanceManager .showDevOPtionsDialog () 7 


return true; 


} 
return super.onKeyUp (keyCode, event); 


修改 MainActivity 中 的 代码 : 


Package com.example.jaki.myapplication; 


import 
import 
import 
import 
import 
import 
import 
import 
public 


android.content.Intent; 

android.os.Build; 

android.provider.Settings; 
android.support.v7.app.AppCompatActivity; 
android.os.Bundle; 

android.view.MotionEvent; 

android.view.View; 

android.widget.TextView; 

class MainActivity extends AppCompatActivity 


@Override 


protected void onCreate (Bundle savedInstanceState) { 


super.onCreate (savedInstanceState) 7 


{ 
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setContentView(R.layout.activity main); 

TextView text = (TextView) findViewById(R.id.textView); 
final MainActivity self = this; 

text .setOnTouchListener (new View.OnTouchListener() { 


@Override 
Public boolean onTouch(View v, MotionEvent event) { 
if (event.getAction() == MotionEvent.ACTION UP){ 


if (Build.VERSION.SDK INT >= 23) { 
if(!Settings.canDrawOverlays (self)) { 
Intent intent = new 
Intent (Settings.ACTION MANAGE OVERLAY PERMISSION); 
startActivity (intent); 
} else { 
// 绘 ui 代码 ， 这 里 说 明 6. 0 系统 已 经 有 权限 了 
Intent intent = new Intent (MainActivity.this, 
RNRctivity.class) 7 
StartRctivity(intent) 7? 
} 
} else { 
// 绘 ui 代码 ,这 里 android 6.0 以 下 的 系统 直接 绘 出 即 可 
Intent intent = new Intent (MainActivity.this, 
RNRActivity.class) 7 
startActivity (intent); 


} 


return true; 


最 后 ， 需 要 在 AndroidManifest.xml 文件 中 进行 权限 的 申请 和 Activity 的 注册 ， 代 码 如 下 : 


<?xml] Version="1.0" encoding="utf-8"?> 
<manifest xmlns:android="http://schemas.android.com/apk/res/android" 
package="com.example.jaki .myapplication"> 
<uses-permission android:name="android.permission.INTERNET" /> 
<uses-permission android:name= 
"android.permission.SYSTEM OVERLAY WINDOW"/> 
<uses-permission android:name="android.permission.SYSTEM ALERT WINDOW"/> 
<application 
android:allowBackup="true" 
android:icon="@mipmap/ic_ launcher" 
android:label="@string/app_ name" 
android:supportsRtl="true" 
android:theme="@style/AppTheme"> 
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<activity android:name=" .MainRActivity"> 
<intent-filter> 
<action android:name="android.intent.action.MAIN" /> 
<category android:name="android.intent.category.LAUNCHER" /> 
</intent-filter> 
</activity> 
<activity android:name= 
"com.facebook.react .devsupport .DevSettingsActivity" /> 
<activity 
android:name=" .RNActivity" 
android:1label="@string/app_name" 
android:theme="@style/Theme.AppCompat.Light.NoActionBar"> 
</activity> 
</application> 
</manifest> 


开启 React Native 的 Node 服务 ， 并 编译 运行 工程 ， 你 会 看 到 在 Android 平台 上 的 效果 与 iOS 
平台 一 致 。 


12.7 ”在 真 机 上 运行 React Native 工程 


前 面 我 们 一 直 在 使 用 模拟 器 来 进行 React Native 项 目的 开发 其 实 也 可 以 直接 在 iPhone 手机 或 
Android 手机 上 进行 项 目的 运行 。 在 iOS 真 机 上 运行 工程 十 分 容易 ， 将 手机 用 数据 线 连接 电脑 ， 使 
用 Xcode 开发 工具 打开 工程 。 若 要 在 iOS 真 机 上 进行 项 目的 运行 ， 首 先 需要 有 一 个 AppID 账号 ， 
并 在 Xcode 工具 栏 中 的 Perfrences 一 accounts 中 进行 登录 ， 之 后 用 工程 的 运行 设备 选择 你 的 手机 ， 
单 击 运行 按钮 即 可 ， 如 图 12-26 所 示 。 





国 ”A HelloWorld 》 目 “jaki" 的 iPhone 





12-26 ”在 真 机 设备 上 运行 React Native 工程 
需要 注意 ， 你 的 手机 所 在 的 网 络 必 须 与 电脑 在 同一 网 段 中 〈 例 如 连同 一 个 WIFID) ， 如 果 想 在 
真 机 中 唤 出 开发 者 菜单 ， 可 以 摇晃 手机 。 
在 Android 设备 上 运行 工程 只 需要 通过 数据 线 将 手机 与 电脑 连接 ， 并 且 保证 只 有 一 个 设备 连 
接 ， 关 闭 所 有 模拟 器 ， 使 用 下 面 的 命令 进行 安装 即 可 : 


react-native run-android 





